/* Heading beside introduction, then the principles as open columns under a gold rule. */
@layer blocks {
	.principles .section-head {
		margin-bottom: var(--section-gap);
	}

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

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

	.principles__item {
		display: grid;
		align-content: start;
		gap: var(--space-2);
		padding-top: var(--space-6);
		box-shadow: inset 0 1px var(--hairline);
	}

	.principles__number {
		font-variant-numeric: tabular-nums;
	}

	.principles__title {
		font-size: var(--type-editorial-title);
		line-height: var(--type-editorial-line);
	}

	.principles__text {
		max-width: 36ch;
		margin-top: var(--space-2);
		color: var(--muted-foreground);
	}

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

		/* Three principles stay one row, never two and a lone third. */
		.principles__list:has(> :nth-child(3):last-child) {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

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

		.principles .section-head__main {
			grid-column: 1 / 6;
		}

		.principles .section-head__intro {
			grid-column: 7 / 12;
			padding-top: var(--space-6);
		}

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

		.principles__list:has(> :nth-child(2):last-child) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.principles__list:has(> :nth-child(4):last-child) {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}
}