/* Die Bilderreihe unter einer royal-Produktseite: alle Bilder gleich groß.
 *
 * DER AUFTRAG (Auftraggeber, 2026-09-29): "kann man das so machen das bei
 * smoothei royal (unter produkte) die bilder unten gleich groß sind bitte?"
 *
 * DER AUSGANGSPUNKT, gemessen an den Dateien:
 *   smoothie-royal-2.jpg   901 x 1600   Seitenverhältnis 0.56
 *   smoothie-royal-3.jpg  1280 x 1600   Seitenverhältnis 0.80
 * Zwei Hochformate, aber deutlich verschieden hoch. Im Dreierraster standen
 * sie deshalb ungleich hoch nebeneinander, und rechts blieb ein Drittel leer.
 *
 * WAS HIER PASSIERT, in zwei Schritten:
 *   1. Bei ZWEI Bildern nimmt jedes die halbe Breite statt eines Drittels --
 *      sonst bliebe die Lücke rechts bestehen.
 *   2. Beide bekommen dasselbe Seitenverhältnis und `object-fit: cover`.
 *
 * WARUM `cover` UND NICHT `fill`: `fill` würde die Bilder verzerren -- eine
 * Maschine sähe schmaler aus, als sie ist. `cover` schneidet stattdessen an
 * den Rändern zu und lässt die Proportionen unangetastet. Bei einem Foto
 * eines Geräts ist beschneiden das kleinere Übel; verzerren wäre eine falsche
 * Aussage über das Produkt.
 *
 * WARUM 3/4 UND NICHT ETWAS ANDERES: Es liegt zwischen den beiden vorhandenen
 * Verhältnissen (0.56 und 0.80) und ist damit der Wert, bei dem insgesamt am
 * wenigsten weggeschnitten wird. `object-position: center` hält die Maschine
 * in der Mitte -- sie steht auf beiden Aufnahmen dort.
 *
 * WARUM NUR smoothie royal: Der Auftrag nannte diese Seite. Die anderen
 * royal-Seiten haben andere Formate -- spargel royal etwa zwei QUERformate
 * (1.37 und 1.49), für die 3/4 ein grober Beschnitt wäre. Gesteuert wird das
 * über ROYAL_GALERIE_GLEICH in scripts/build.py; eine weitere Seite ist dort
 * eine Zeile.
 */

.royal-galerie-gleich > div {
  /* Zwei Bilder füllen die Zeile statt zweier Drittel. Bei drei Bildern
     bleibt das Drittelraster, deshalb hängt die Regel an der Klasse, die
     build.py nur bei genau zwei Bildern setzt. */
  width: 50%;
}

.royal-galerie-gleich img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
}

/* Auf dem Telefon stehen die Bilder ohnehin untereinander (col-sm-4 greift
   erst ab 768px). Dann ist die volle Breite richtig -- und ein erzwungenes
   Hochformat über die ganze Breite wäre ein sehr hoher Klotz. */
@media (max-width: 767px) {
  .royal-galerie-gleich > div {
    width: 100%;
  }
  .royal-galerie-gleich img {
    aspect-ratio: auto;
  }
}