96 lines
1.6 KiB
CSS
96 lines
1.6 KiB
CSS
.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);
|
||
}
|
||
}
|