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

   Drei Abstaende in diesem Abschnitt: --s6 oben, --s3 zwischen
   Ueberschrift und Liste, --s2 zwischen Nummer und Ueberschrift.
   Ein vierter waere ein Zeichen, dass der Abschnitt falsch
   geschnitten ist.
   ═════════════════════════════════════════════════════════════ */

.saeulen__g {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s6);
	align-items: start;
}

/* Der Spaltenkopf traegt --s3 nach unten wie jede Ueberschrift;
   Liste und Kachel danach tragen nichts nach oben. Einer von beiden,
   nie beide. */
.saeulen__titel {
	font-size: clamp(1.125rem, 1.5vw, 1.375rem);
}
.saeulen__titel + .saeulen__kachel { margin-top: 0; }

.saeulen__kachel { margin-top: var(--s3); }

/* --s2, wie der Abstand der Liste darueber. Vom letzten Wert bis zum
   Verweis waren es sonst 29 Pixel, von Zeile zu Zeile 25: wieder
   zwei Zahlen fuer dieselbe Fuge. */
.saeulen__weiter {
	margin: var(--s2) 0 0;
}

@media (max-width: 61.25rem) {

	.saeulen__g {
		grid-template-columns: 1fr;
		gap: var(--s5);
	}
}