.banner-rows {
	--banner-gap: 16px;
	--banner-unit-ratio: 1; /* Width / height of a 1x1. Use 1.5 for shorter rows. */
	--banner-max-height: 450px; /* Tallest a banner gets. */

	container-type: inline-size;
	display: grid;
	gap: var(--banner-gap);
	/* Stop growing once a 1x1 reaches the max height (3 columns of 450px plus the gaps, about 1382px),
	   and centre. Banners then keep their true shape at every width: 1x1 square, 1x2 2:1, 1x3 3:1,
	   instead of rows staying 450px tall while getting wider. */
	max-width: calc(3 * var(--banner-max-height) + 2 * var(--banner-gap));
	margin-inline: auto;
}

.banner-rows__row {
	--banner-cols: 3; /* Set per row by the template: 3, or 4 for "Two 1x2". */

	display: grid;
	gap: var(--banner-gap);
	grid-template-columns: repeat(var(--banner-cols), minmax(0, 1fr));
	/* Row height = one column's width, so every banner keeps its 1x1 / 1x2 / 1x3 shape, up to the max height. */
	grid-auto-rows: min(
		calc((100cqw - (var(--banner-cols) - 1) * var(--banner-gap)) / var(--banner-cols) / var(--banner-unit-ratio)),
		var(--banner-max-height)
	);
}

.banner-rows__item {
	display: block;
	grid-column: span var(--banner-span);
	overflow: hidden;
}

.banner-rows__item--span-1 { --banner-span: 1; }
.banner-rows__item--span-2 { --banner-span: 2; }
.banner-rows__item--span-3 { --banner-span: 3; }

.banner-rows__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* <picture> wrapper used when a 1x3 banner has a mobile image. */
.banner-rows__picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* Phones (below 768px, same as the hero slider): stack banners full width, keeping each banner's proportions. */
@media (max-width: 767px) {
	.banner-rows__row {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
	}

	.banner-rows__item {
		grid-column: auto;
		/* Full width always; past the max height the image is cropped rather than the banner narrowed. */
		width: 100%;
		aspect-ratio: calc(var(--banner-span) * var(--banner-unit-ratio));
		max-height: var(--banner-max-height);
	}

	/* 1x1 banners stay full squares on phones and small tablets, not cropped to the max height. */
	.banner-rows__item--span-1 {
		max-height: none;
	}

	/* A 1x3 with a vertical mobile image shows it uncropped, at its own height (like the hero slider). */
	.banner-rows__item--has-mobile {
		aspect-ratio: auto;
		max-height: none;
	}

	.banner-rows__item--has-mobile .banner-rows__image {
		height: auto;
	}
}

/* Spacing around the section on the homepage. */
.banner-rows-wrap.container-fluid {
	padding: 2em 10%;
}

/* Phones: less side padding so the banners stay large. */
@media (max-width: 767px) {
	.banner-rows-wrap.container-fluid {
		padding-left: 5%;
		padding-right: 5%;
	}
}