/*
 * Criteria, measured from the reference ("image copy 6", 1902 px wide):
 *   head      eyebrow, then the heading; the introduction from about two
 *             thirds across, level with the heading; 50 px on to the rules
 *   grid      three columns, 40 px apart; each item opens with a 1 px
 *             neutral rule; the number (13 px, grey) 31 px below it, the
 *             serif term (20 px) 34 px below that, the sentence (15/27)
 *             14 px below; 55 px of air before the next row's rule
 */
@layer blocks {
	.criteria__head {
		display: grid;
		gap: var(--space-6);
		margin-bottom: var(--space-10);
	}

	.criteria .section-head__standfirst {
		color: var(--muted-foreground);
	}

	.criteria__list {
		display: grid;
		column-gap: var(--space-10);
	}

	.criteria__item {
		display: grid;
		align-content: start;
		padding: var(--space-7) 0 var(--space-12);
		box-shadow: inset 0 1px var(--border);
	}

	.criteria__number {
		font-size: 0.8125rem;
		line-height: 1rem;
		letter-spacing: 0.04em;
		font-variant-numeric: lining-nums tabular-nums;
		color: var(--subtle-foreground);
	}

	.criteria__title {
		margin-top: var(--space-6);
		font-size: var(--type-editorial-title);
		line-height: var(--type-editorial-line);
	}

	.criteria__text {
		max-width: 40ch;
		margin-top: var(--space-3);
		color: var(--muted-foreground);
		line-height: 1.6875rem;
	}

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

	@media (min-width: 64rem) {
		.criteria__head {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			column-gap: var(--grid-gap);
			align-items: start;
			margin-bottom: var(--space-12);
		}

		.criteria__head .section-head {
			grid-column: 1 / -1;
			grid-template-columns: subgrid;
			align-items: start;
		}

		.criteria__head .section-head__main {
			grid-column: 1 / 8;
		}

		/* Level with the heading, below the eyebrow. */
		.criteria__head .section-head__intro {
			grid-column: 9 / -1;
			padding-top: var(--space-7);
		}

		.criteria__link {
			grid-column: 9 / -1;
		}

		.criteria__list {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.criteria__item {
			padding-bottom: var(--space-14);
		}
	}
}