106 lines
1.9 KiB
CSS
106 lines
1.9 KiB
CSS
.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";
|
||
}
|
||
}
|