.faqs {
	margin-top: 24px;
	margin-bottom: 24px;
}

.faqs-item__checkbox {
	display: none;
}

.faqs-item__question {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px;
	font-weight: 600;
	line-height: 24px;
	background-color: var(--comet-50);
	border-radius: 12px;
	cursor: pointer;
	transition: background-color ease .1s;
}

.faqs-item__question:hover,
.faqs-item__question:hover ~ .faqs-item__answer {
	background-color: var(--comet-100);
}

.faqs-item__checkbox:checked ~ .faqs-item__question {
	border-radius: 12px 12px 0 0;
}

.faqs-item:not(:last-child) {
	margin-bottom: 12px;
}

.faqs-item__question .svg-icon {
	flex-shrink: 0;
	font-size: 20px;
	transition: transform ease .15s;
}

.faqs-item__checkbox:checked ~ .faqs-item__question .svg-icon {
	transform: rotate(-180deg);
}

.faqs-item__question .icon--chevron {
	margin-left: auto;
}

.faqs-item__answer {
	display: none;
	padding: 0 20px 20px 20px;
	background-color: var(--comet-50);
	border-radius: 0 0 12px 12px;
	transition: background-color ease .1s;
}

.faqs-item__checkbox:checked ~ .faqs-item__answer {
	display: block;
}

.faqs-item__answer p:last-child {
	margin-bottom: 0;
}

@media (min-width: 576px) {
	.faqs-item__question {
		padding: 24px;
	}

	.faqs-item__answer {
		padding: 0 24px 24px 24px;
	}
}