/* Block: Image banner. Figma: About 1:218 (1920×700), 1:238-1:239 (2 × 960×700), 1:274 (1920×1281) */

/* Directly under the header, and against the footer, the banner sits flush. */
.site-main > .section--image-banner:first-child { --pt: 0px; }
.site-main:has(> .section--image-banner:last-child) + .site-footer { margin-top: 0; }

.image-banner {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
}

.image-banner--wide { aspect-ratio: 1920 / 700; }
.image-banner--tall { aspect-ratio: 1920 / 860; }
.image-banner--full { aspect-ratio: 1920 / 1281; }

.image-banner__media { min-height: 0; }
.image-banner__caption { margin-top: clamp(14px, 1.3vw, 25px); }

@media (max-width: 767px) {
	.image-banner--wide { aspect-ratio: 16 / 9; }
	.image-banner--tall { aspect-ratio: 3 / 2; }
	.image-banner--full { aspect-ratio: 4 / 3; }
}

@media (max-width: 600px) {
	.image-banner--2 {
		grid-auto-flow: row;
		aspect-ratio: auto;
	}

	.image-banner--2 .image-banner__media { aspect-ratio: 4 / 3; }
}