section.faq {
	padding-inline: 16px;
	margin-block: 64px;

	& .faq-container {
		max-width: 640px;
		margin-inline: auto;
		width: 100%;

		display: flex;
		flex-direction: column;
		gap: 24px;

		overflow-y: clip;

		& .faq-heading {
			display: flex;
			flex-direction: column;
			gap: 8px;
		}

		& .faq-items {
			& .faq-item {
				display: flex;
				flex-direction: column;
				gap: 8px;
				border-bottom: 1px solid var(--color-border);
				margin-bottom: -1px;
				padding-block: 16px;

				& .faq-question {
					display: flex;
					gap: 16px;
					align-items: flex-start;
					justify-content: space-between;
					cursor: pointer;

					& .faq-question-title {
					}

					& .faq-question-arrow {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 32px;
						padding: 0px;
						border: 1px solid var(--color-border);
						border-radius: var(--radius-full);

						transition-property: rotate;
						& {
							rotate: 90deg;
						}
						[data-accordion-selected] & {
							rotate: -90deg;
						}
					}
				}

				& .faq-answer {
					color: var(--color-fg-3);
				}
			}
		}
	}
}