/* ══ Baustein Groessen ═══════════════════════════════════════
   Vorbild: 03_Design/final/idee-buchen.html

   Fuenf Kacheln, Bilder bis an die Kante, zwei Pixel Fuge, so wie
   ueberall im Haus. Drei Abstaende in diesem Abschnitt: --abschnitt
   oben, --s3 im Text der Kachel, 2px zwischen den Kacheln.
   ═════════════════════════════════════════════════════════════ */


.groessen__g {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.groessen__g > li { display: block; }

.groessen__g a {
	display: block;
	height: 100%;
	background: var(--pa2);
}

.groessen__bild {
	display: block;
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--pa2);
}

.groessen__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--e);
}

.groessen__g a:hover img { transform: scale(1.04); }

/* --s4 oben, nicht --s3: der Name stand neunzehn Pixel unter der
   Bildkante. Damit sind es drei Abstaende in diesem Abschnitt und
   nicht vier: --abschnitt, --s4, --s1. */
.groessen__t {
	display: block;
	padding: var(--s4) var(--s3);
}

.groessen__nm {
	display: block;
	font-size: 1.0625rem;
	letter-spacing: -.025em;
}

.groessen__fakt {
	display: block;
	margin-top: var(--s1);
	font-size: .8125rem;
	color: var(--mu);
}

.groessen__preis {
	display: block;
	margin-top: var(--s1);
	font-size: .8125rem;
}

@media (prefers-reduced-motion: reduce) {
	.groessen__bild img { transition: none; }
	.groessen__g a:hover img { transform: none; }
}

@media (max-width: 61.25rem) {

	.groessen__g {
		grid-template-columns: 1fr 1fr;
	}

	.groessen__bild { aspect-ratio: 3 / 2; }

	/* Fuenf Kacheln in zwei Spalten lassen unten ein Loch. Die
	   letzte nimmt beide Spalten, damit die Reihe geschlossen ist.
	   Ueber nth-child, nicht ueber eine Klasse: kommt ein sechster
	   Typ dazu, geht das Raster von selbst wieder auf. */
	.groessen__g > li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.groessen__g > li:last-child:nth-child(odd) .groessen__bild {
		aspect-ratio: 2 / 1;
	}
}