/* 12-carousel.css — Bild-Karussells
   Teil von css/living-canvas (aufgeteilt). Ladereihenfolge = Dateiname.
   Siehe docs/components/ fuer die Zuordnung Sektion -> Datei. */
.carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 2px 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.carousel figure {
  scroll-snap-align: start;
  flex: 0 0 82%;
  max-width: 560px;
  margin: 0;
  cursor: zoom-in;
}
.carousel img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(16, 43, 60, 0.1);
  display: block;
  transition: transform 0.3s var(--ease-smooth);
}
.carousel figure:hover img {
  transform: scale(1.03);
}
.carousel figcaption {
  margin-top: 0.6rem;
  font-size: 12px;
  color: var(--grey);
  text-align: center;
}