.foldable {
	position: relative;
}

.foldable input {
	position: absolute;
	opacity: 0;
	z-index: -1;
}

.foldable-content {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 500ms;
}

.foldable-content > .foldable-item {
	overflow: hidden;
}

.foldable input:checked ~ .foldable-content {
	grid-template-rows: 1fr;
}

.foldable-header {
	display: flex;
	color: var(--brand-color);
	cursor: pointer;
	justify-content: space-between;
	align-items: center;
	padding-block: 1rem;
	width: max-content;
}

.foldable-header::after {
	content: "\276F";
	width: 1em;
	height: 1em;
	text-align: center;
	transform: rotate(90deg);
	transition: all 0.35s;
	margin-left: 1rem;
}

.foldable input:checked + .foldable-header::after {
	transform: rotate(270deg);
}