.gallery{

    padding-block:5rem;

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    grid-auto-rows:160px;

    gap:1rem;

}

.gallery-item{

    position:relative;

    display:block;

    width:100%;

    height:100%;

    border:none;

    padding:0;

    border-radius:var(--radius-sm);

    overflow:hidden;

    cursor:pointer;

    background:linear-gradient(135deg,var(--gold-light),var(--gold-mid) 60%,var(--gold-deep));

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform var(--speed-normal) ease;

}

.gallery-item:hover img{

    transform:scale(1.06);

}

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,rgba(20,61,89,.35),transparent 50%);

    opacity:0;

    transition:opacity var(--speed-fast) ease;

}

.gallery-item:hover::after{

    opacity:1;

}

.gallery-item.span-wide{

    grid-column:span 2;

}

.gallery-item.span-tall{

    grid-row:span 2;

}

.gallery-item.span-big{

    grid-column:span 2;

    grid-row:span 2;

}

.gallery-lightbox{

    position:fixed;

    inset:0;

    z-index:1000;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(11,31,51,.92);

    opacity:0;

    pointer-events:none;

    transition:opacity var(--speed-normal) ease;

    padding:2rem;

}

.gallery-lightbox.is-open{

    opacity:1;

    pointer-events:auto;

}

.gallery-lightbox img{

    max-width:min(90vw,900px);

    max-height:85vh;

    border-radius:var(--radius-sm);

    box-shadow:0 20px 60px rgba(0,0,0,.4);

}

.gallery-lightbox-close{

    position:absolute;

    top:1.5rem;

    right:1.5rem;

    width:44px;

    height:44px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.1);

    color:#FFFFFF;

    font-size:1.5rem;

    line-height:1;

    cursor:pointer;

    transition:background var(--speed-fast) ease;

}

.gallery-lightbox-close:hover{

    background:rgba(255,255,255,.2);

}

@media (max-width:768px){

    .gallery-grid{

        grid-template-columns:repeat(2,1fr);

        grid-auto-rows:140px;

    }

    .gallery-item.span-big{

        grid-column:span 2;

        grid-row:span 2;

    }

}

.gallery-lightbox-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.1);

    color:#FFFFFF;

    font-size:1.75rem;

    line-height:1;

    cursor:pointer;

    transition:background var(--speed-fast) ease;

}

.gallery-lightbox-arrow:hover{

    background:rgba(255,255,255,.2);

}

.gallery-lightbox-arrow.prev{

    left:1.5rem;

}

.gallery-lightbox-arrow.next{

    right:1.5rem;

}

.gallery-lightbox-counter{

    position:absolute;

    bottom:1.5rem;

    left:50%;

    transform:translateX(-50%);

    font-family:"Manrope",sans-serif;

    font-size:.85rem;

    color:rgba(255,255,255,.7);

}

@media (max-width:600px){

    .gallery-lightbox-arrow{

        width:44px;

        height:44px;

        font-size:1.4rem;

    }

    .gallery-lightbox-arrow.prev{

        left:.5rem;

    }

    .gallery-lightbox-arrow.next{

        right:.5rem;

    }

}