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

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

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.item {
  position: relative;
}

.frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  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: 768px – 3 Spalten, 2 Zeilen, versetzter Look */
@media (min-width: 768px) {
  .gallerySection {
    padding-block: var(--space-16);
  }

  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }

  .frame {
    aspect-ratio: 3 / 4;
  }

  /* Versatz-Muster: mittlere Spalte tiefer, äußere Spalten höher */
  .item[data-index="0"],
  .item[data-index="2"] {
    margin-top: 0;
  }

  .item[data-index="1"] {
    margin-top: var(--space-10);
  }

  .item[data-index="3"],
  .item[data-index="5"] {
    margin-top: calc(-1 * var(--space-6));
  }

  .item[data-index="4"] {
    margin-top: var(--space-4);
  }
}

/* Desktop: 1024px */
@media (min-width: 1024px) {
  .gallerySection {
    padding-block: var(--space-20);
  }

  .item[data-index="1"] {
    margin-top: var(--space-14);
  }

  .item[data-index="3"],
  .item[data-index="5"] {
    margin-top: calc(-1 * var(--space-8));
  }

  .item[data-index="4"] {
    margin-top: var(--space-6);
  }
}