/* assets/css/fotoaufgaben.css — "Fotoaufgaben und Live-Fotowand" auf /hub/.
   Markup: _sections/fotoaufgaben.php. Punkte, Hinweis und Wiki-Knopf
   kommen aus galerie-look.css (.gl-*), hier stehen nur die zwei Bilder.

   ZWEI BILDER, EINE HOEHE: die Wand ist 16:9 (1600x900), die Handy-Seite
   hochkant (780x1688). Spalten 3:1 geben der Wand den Platz; das Handy
   fuellt dieselbe Hoehe und wird unten beschnitten (object-position: top),
   so bleiben Fortschritt, Rangliste und Weiter-Code sichtbar.
   Unter 760 px untereinander, das Handy schmal und mittig.

   FESTES SEITENVERHAELTNIS: die Bilder laden verzoegert, ohne reservierte
   Hoehe springt die Seite. */

.fa-bilder {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.fa-bilder figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  overflow: hidden;
}

.fa-bilder img {
  display: block;
  width: 100%;
}

.fa-wand img { height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.fa-handy { position: relative; }
/* absolut, damit nur die Wand die Zeilenhoehe bestimmt */
.fa-handy img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: top; }

@media (max-width: 760px) {
  .fa-bilder { grid-template-columns: 1fr; gap: 12px; }
  .fa-handy { justify-self: center; width: min(220px, 70%); }
  .fa-handy img { position: static; height: auto; aspect-ratio: 3 / 5; }
}