@media ( max-width: 63.99rem ) {
	.faq.section {
		padding-block: calc(var(--space-section-normal) / 3);
	}
}

.faq__card {
	background-color: var(--color-background);
	border: var(--border-width-s) solid var(--color-border);
	border-radius: var(--radius-l);
	padding: var(--space-l);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-m);
}

@media (min-width: 56rem) {
	.faq__card {
		grid-template-columns: minmax(14rem, 18rem) 1fr;
		gap: var(--space-xl);
	}
}

.faq__topic {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
}

.faq__topic-heading {
	margin: 0;
}

.faq__topic-text {
	color: var(--color-text-muted);
}

.faq__items {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	min-width: 0;
}

.faq__item {
	background-color: var(--color-background-alt);
	border-radius: var(--radius-m);
	padding: var(--space-s) var(--space-m);
	transition: background-color var(--transition-fast);
}

.faq__item[open] {
	background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-background-alt));
}

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m);
	cursor: pointer;
	list-style: none;
	margin: 0;
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__question-text {
	font-weight: var(--font-weight-medium);
}

.faq__icon {
	position: relative;
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--radius-full);
	background-color: var(--color-primary);
	transition: transform var(--transition-fast);
}

.faq__icon::before,
.faq__icon::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	background-color: var(--color-text-inverse);
}

.faq__icon::before {
	width: 0.6rem;
	height: 2px;
}

.faq__icon::after {
	width: 2px;
	height: 0.6rem;
}

.faq__item[open] .faq__icon {
	transform: rotate(45deg);
}

.faq__answer {
	margin-top: var(--space-s);
	color: var(--color-text-muted);
}

.faq__item[hidden],
.faq__card[hidden] {
	display: none;
}