/* ═══ Baustein Bildband ═════════════════════════════════════
   Vorbild: 03_Design/final/idee-start.html

   Drei Bilder ueber die volle Fensterbreite, zwei Pixel Fuge, das
   erste breiter als die beiden anderen. Kein Satzspiegel darum,
   keine Ueberschrift darueber: das Band steht fuer sich zwischen
   zwei Abschnitten und zeigt Haus und Wohnung nebeneinander.

   Die Bildunterschrift steht auf einer Platte, nicht auf einem
   Verlauf. Ein Verlauf haengt an der Bildhoehe, eine Platte deckt
   unabhaengig davon, was hinter ihr liegt.
   ═══════════════════════════════════════════════════════════ */

.band3 {
	display: grid;
	grid-template-columns: 1.45fr 1fr 1fr;
	gap: 2px;
	height: clamp(22rem, 62vh, 40rem);
}

.band3 figure {
	position: relative;
	overflow: hidden;
	margin: 0;
	background: var(--pa2);
}

.band3 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--e);
}
.band3 figure:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
	.band3 img { transition: none; }
	.band3 figure:hover img { transform: none; }
}

@media (max-width: 61.25rem) {
	/* Drei Bilder auf zwei Spalten lassen eine halbe Zeile leer.
	   Das erste nimmt deshalb die volle Breite. */
	.band3 {
		grid-template-columns: 1fr 1fr;
		height: auto;
	}
	.band3 figure { aspect-ratio: 1; }
	.band3 figure:first-child {
		grid-column: 1 / -1;
		aspect-ratio: 3 / 2;
	}
}