:root{
    --nav-h: 75px;
}

.zg {
    position: relative;
    background: #fff;
    margin: 0;
    --zg-safe-top: 10vh;
}

.zg-pin {
    position: sticky;
    top: var(--nav-h);
    height: calc(100vh - var(--nav-h));
    box-sizing: border-box;
}

.zg-stage {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: 50% 10%;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
}

.zg-canvas {
    width: 220vw;
    min-width: 220vw;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    position: relative;
}

.zg-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--bs-border-radius-xxl, 1rem);
    aspect-ratio: 5 / 3;
}
.zg-tile > img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}

.zgc--col1{ grid-column: 1; }
.zgc--col2{ grid-column: 2; }
.zgc--col3{ grid-column: 3; }
.zgc--row1{ grid-row: 1; }
.zgc--row2{ grid-row: 2; }

.zgc--lift-top{    transform: translateY(-10%); }
.zgc--lift-bottom{ transform: translateY(-30%); }

@media (min-width: 1800px){
    .zg-canvas{ width: 240vw; min-width: 240vw; }
}

@media (min-width: 1200px) and (max-width: 1800px){
    .zg-canvas{ width: 220vw; min-width: 220vw; }
}

@media (min-width: 1400px){
    .zg-canvas{ gap: 4rem; }
}