chess-scribe-website/src/styles/_accordion.css

.hero__accordion-container {
	grid-column: 1 / -1;
	max-width: 600px;
	padding: 1rem;
}

.hero__accordion-item {
	overflow: clip;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 0.15s;
	cursor: pointer;
	padding: 1rem 0;
}

.hero__accordion-item:not(:last-child) {
	border-bottom: 1px solid var(--neutral-content);
}

.hero__accordion-details[open] + .hero__accordion-item__content {
	grid-template-rows: 1fr;
	padding: 10px;
}

.hero__accordion-details[open] .hero__accordion-item__title-container:after {
	transform: rotate(270deg);
}

.hero__accordion-item__summary {
	display: block;

	&::-webkit-details-marker {
		display: none;
	}
}

.hero__accordion-item__title-container {
	display: flex;
	justify-content: space-between;

	&:after {
		content: "\276F";
		color: var(--neutral-content);
		margin-right: 1rem;
		transform: rotate(90deg);
		transition: transform 0.3s ease;
	}
}

.hero__accordion-item__title {
	color: var(--neutral-content);
	font-size: 1.25rem;
	font-weight: 600;
}

.hero__accordion-item__content {
	padding: 0 10px;
	display: grid;
	grid-template-rows: 0fr;
	transition:
		grid-template-rows 0.3s ease,
		padding 0.3s ease;

	@media (prefers-reduced-motion) {
		transition: none;
	}
}

.hero__accordion-item__content__inner {
	color: var(--neutral-content);
	overflow: hidden;
	margin: 0;
}