/* category-grid — Figma 258:487: 439px cards, gap 42 across, 88 between rows, last row centred. */

.category-grid {
	padding-block: var(--space-8) calc(var(--space-section) / 2);
}

.category-grid__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-21) var(--space-11);
	margin-block: 0;
	list-style: none;
}

.category-grid__item {
	display: flex;
	flex: 0 1 calc((100% - 2 * var(--space-11)) / 3); /* 3 per row; the 2-card row centres itself */
}

.category-grid__item > .card {
	flex: 1;
}

@media (max-width: 1023px) { /* bp: --bp-lg */
	.category-grid__list {
		gap: var(--space-8);
	}

	.category-grid__item {
		flex-basis: calc((100% - var(--space-8)) / 2);
	}
}

@media (max-width: 639px) { /* bp: --bp-sm — one card per row: 28px titles need the width */
	.category-grid__item {
		flex-basis: 100%;
		max-inline-size: 28rem;
	}
}