/* ═══ Baustein Sölden ═══════════════════════════════════════
   Vorbild: 03_Design/final/idee-start.html

   Vier Spalten, zwei Pixel Fuge. Das erste Bild nimmt zwei mal
   zwei Felder, drei einfache daneben, dazu eine Textkachel auf
   Papier zweiter Stufe. So steht der Ort in einem Raster statt in
   drei Bildern nebeneinander, und die Textkachel bringt die dritte
   Groesse in den Abschnitt.
   ═══════════════════════════════════════════════════════════ */


.soe__g {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: clamp(11rem, 22vw, 17rem);
	gap: 2px;
}

.soe__g figure {
	position: relative;
	overflow: hidden;
	margin: 0;
	background: var(--pa2);
}
.soe__g figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.soe__g figure:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

/* Die Tafel ist die Textkachel aus basis.css (.platte): Kicker,
   Satz und eine Liste. */
.soe__liste {
	font-size: .8125rem;
	color: var(--mu);
	list-style: none;
}
.soe__liste li {
	padding-block: .35rem;
	border-top: 1px solid var(--ln);
}

@media (max-width: 61.25rem) {
	/* Zwei Spalten, und die Zeilen nehmen ihre Hoehe aus dem Inhalt.
	   Mit einer festen Zeilenhoehe blieb unter der Textkachel eine
	   leere Flaeche stehen, die als Abstand von 143 Pixeln gemessen
	   wurde. Die Bilder halten ihr Verhaeltnis selbst. */
	.soe__g {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: auto;
		row-gap: 0;
	}
	.soe__g figure { aspect-ratio: 4 / 3; }
	.soe__g figure:first-child {
		grid-column: span 2;
		grid-row: span 1;
		aspect-ratio: 3 / 2;
	}
	.soe__tafel { grid-column: span 2; }
}