.gallerySection {
  padding-block: var(--space-10);
}

.inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Mobile: einfache Stapelung */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.item {
  position: relative;
}

.frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 24px 60px rgba(0, 0, 0, 0.06);
}

.image {
  object-fit: cover;
  transition: transform 0.4s ease;
}

.frame:hover .image {
  transform: scale(1.04);
}

/*
  Tablet & Desktop ab 768px: Bento-Grid mit benannten Areas.
  6 Bilder, ein großes Hauptbild (a) oben links, Rest gestaffelt drumherum.
  Jede Area erscheint genau einmal im Template -> kein Bild geht verloren.
*/
@media (min-width: 768px) {
  .gallerySection {
    padding-block: var(--space-16);
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, minmax(140px, 1fr));
    grid-template-areas:
      "a a b c"
      "a a d d"
      "e e f f";
    gap: var(--space-4);
  }

  .item {
    height: 100%;
  }

  .frame {
    height: 100%;
    aspect-ratio: auto;
  }

  .item[data-index="0"] {
    grid-area: a;
  }
  .item[data-index="1"] {
    grid-area: b;
  }
  .item[data-index="2"] {
    grid-area: c;
  }
  .item[data-index="3"] {
    grid-area: d;
  }
  .item[data-index="4"] {
    grid-area: e;
  }
  .item[data-index="5"] {
    grid-area: f;
  }
}

/* Desktop: 1024px – großzügigere, breitere Variante desselben Musters */
@media (min-width: 1024px) {
  .gallerySection {
    padding-block: var(--space-20);
  }

  .grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, minmax(200px, 1fr));
    grid-template-areas:
      "a a a b b c"
      "a a a d e c";
  }
}