/*
 * Focus areas: the section head, then every area at once in a grid
 * (--focus-columns, set per block from the number of areas: up to four in
 * a row on desktop, two on tablets, one on phones). Portrait photographs,
 * captioned beneath; no slider.
 */
@layer blocks {
	.focus-areas__list {
		display: grid;
		gap: var(--space-12) var(--grid-gap);
		margin-top: var(--space-10);
	}

	.focus-areas__item {
		display: grid;
		align-content: start;
	}

	.focus-areas__media {
		aspect-ratio: 3 / 2;
		overflow: hidden;
		background: var(--muted);
	}

	.focus-areas__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.focus-areas__number {
		margin-top: var(--space-5);
		font-variant-numeric: tabular-nums;
	}

	.focus-areas__title {
		margin-top: var(--space-1);
		font-size: var(--type-editorial-title);
		line-height: var(--type-editorial-line);
		text-wrap: pretty;
	}

	.focus-areas__text {
		max-width: 40ch;
		margin-top: var(--space-3);
		color: var(--muted-foreground);
		font-size: var(--type-small-size);
		line-height: var(--type-small-line);
	}

	@media (min-width: 40rem) {
		.focus-areas__list {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.focus-areas__media {
			aspect-ratio: 4 / 5;
		}
	}

	@media (min-width: 64rem) {
		.focus-areas__list {
			grid-template-columns: repeat(var(--focus-columns, 4), minmax(0, 1fr));
			row-gap: var(--space-16);
			margin-top: var(--space-16);
		}
	}
}