/* figure: ein einzelnes Foto — das eines Gerichts, auf Gericht,
   Rezeptumsetzung und Rezept. Übernommen aus calisthenics.

   Festes Seitenverhältnis aus `--figure-ratio`: Fotos kommen hoch und quer,
   und ohne festen Rahmen stünde jedes Foto anders hoch auf der Seite.
   `object-fit: cover` mit `object-position: center` füllt den Rahmen und
   schneidet ringsum gleichmäßig weg — zu sehen ist die Bildmitte, und dort
   liegt der Teller. Der Rahmen hält den Platz schon frei, bevor das Foto da
   ist; die Seite springt beim Laden also nicht. */
.figure {
  display: block;
  margin: 0;
  min-width: 0;
  position: relative;
  aspect-ratio: var(--figure-ratio);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

/* Der Knopf zum Bearbeiten liegt auf dem Bild, unten rechts. */
.figure__action {
  position: absolute;
  inset-block-end: var(--space-2);
  inset-inline-end: var(--space-2);
}

.figure__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}