.faq {
	counter-reset: card;
}

.faq .card {
	display: flex;
	gap: 1rem;
	width: clamp(200px, 20vw, 350px);
	min-height: clamp(300px, 25vw, 400px);
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
	margin: 2rem;
	padding: 1rem;
}

.card .flex-col {
	gap: 2rem;
}

.faq .card::before {
	counter-increment: card;
	content: counter(card);
	font-size: var(--fontSizeHuge);
	color: var(--bgLogo);
	font-weight: 900;
	line-height: 0.8;
	letter-spacing: -10px;
}

.faq .grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

@media only screen and (min-width: 350px) and (max-width: 910px) {
	.faq .grid {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		justify-items: center;
	}

	.faq .card {
		flex-direction: column;
		width: clamp(280px, 80vw, 350px);
	}
}