update

components/BentoGallery.module.css

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