.faq {

}

.faq_list {
	--content-gap: clamp(var(--i5), 3vw, var(--i4));
}

.faq_list:not(:first-child) {
	margin-top: clamp(var(--i4), 4vw, var(--i1));
}

.faq_li {
	width: 100%;
	padding: clamp(var(--i5), 3vw, var(--i3)) clamp(var(--i4), 4vw, var(--i2));
	background-color: var(--gray-baclground);
	border-radius: var(--bdrs-xl);
}

.faq_trigger {
	grid-gap: var(--gap);

	margin: calc(clamp(var(--i5), 3vw, var(--i3)) * -1) calc(clamp(var(--i4), 4vw, var(--i2)) * -1);
	padding: clamp(var(--i5), 3vw, var(--i3)) clamp(var(--i4), 4vw, var(--i2));
	min-height: 72px;
}

.faq_trigger span {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	position: relative;

	width: clamp(17px, 4vw, 28px);
	aspect-ratio: 1/1;
}

.faq_trigger span:before,
.faq_trigger span:after {
	content: '';
	position: absolute;

	width: 100%;
	border-bottom: 1.5px solid currentColor;

	-webkit-transition: transform .43s;
	-moz-transition: transform .43s;
	-ms-transition: transform .43s;
	-o-transition: transform .43s;
	transition: transform .43s;
}

.faq_trigger:not(.active) span:after {
	transform: rotate(90deg);
}

.faq_trigger.active span:before,
.faq_trigger.active span:after {
	transform: rotate(360deg);
}

.faq_content {
	display: none;

	margin-top: var(--i4);
}