/*
 * media -- ein Bild mit Bildunterschrift.
 *
 * Stand bis zum 11. September 2026 in point.css und ist hierher gezogen, als die
 * Mediathek im Adminbereich dieselbe Darstellung brauchte. point.css hatte das
 * vorhergesehen.
 *
 * media__image  das Bild; feste Seitenverhältnisse, damit die Seite beim Laden nicht
 *               springt und eine Liste ruhig aussieht
 * media__caption  die Unterschrift darunter
 */

.media {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.media__image {
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-large);
  /* Vor dem geladenen Bild eine ruhige Flaeche statt eines Lochs */
  background-color: var(--color-surface);
  object-fit: cover;
}

.media__caption {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* In der Maske eines Bildes: groß genug zum Beurteilen, aber nicht seitenfüllend.
   Für die Listen der Verwaltung gibt es stattdessen `image-row` -- dort will man
   zehn Bilder auf einen Blick und nicht eines je Bildschirm. */
.media--preview .media__image {
  inline-size: min(100%, 24rem);
}