update

components/StaggeredGallery.module.css

@@ -0,0 +1,95 @@
+.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);
+  }
+}