.gallery-grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:0;
}

.gallery-item{
    position:relative;
    display:block;
    overflow:hidden;
    aspect-ratio:1 / 1;
    background:#000;
}

.gallery-item img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform 0.35s ease, opacity 0.35s ease;
}

.gallery-item:hover img{
    transform:scale(1.05);
    opacity:0.9;
}

.gallery-lightbox{
    position:fixed;
    top:0;
    left:0;
    z-index:99999;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.88);
    opacity:0;
    visibility:hidden;
    transition:opacity 0.25s ease, visibility 0.25s ease;
}

.gallery-lightbox.open{
    opacity:1;
    visibility:visible;
}

.gallery-lightbox-inner{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:90%;
    max-width:1100px;
    max-height:88vh;
    text-align:center;
}

.gallery-lightbox-inner img{
    max-width:100%;
    max-height:88vh;
    display:block;
    margin:0 auto;
    box-shadow:0 0 30px rgba(0,0,0,0.35);
}

.gallery-close{
    position:absolute;
    top:20px;
    right:25px;
    z-index:100001;
    width:54px;
    height:54px;
    border:0;
    background:rgba(0,0,0,0.35);
    color:#fff;
    font-size:42px;
    line-height:54px;
    text-align:center;
    cursor:pointer;
}

.gallery-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:100001;
    width:54px;
    height:84px;
    border:0;
    background:rgba(0,0,0,0.35);
    color:#fff;
    font-size:48px;
    line-height:84px;
    text-align:center;
    cursor:pointer;
}

.gallery-prev{
    left:15px;
}

.gallery-next{
    right:15px;
}

.gallery-close:hover,
.gallery-nav:hover{
    background:rgba(192,38,46,0.85);
}

@media all and (max-width:1160px){
    .gallery-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

@media all and (max-width:767px){
    .gallery-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .gallery-close{
        top:10px;
        right:10px;
        width:44px;
        height:44px;
        font-size:34px;
        line-height:44px;
    }

    .gallery-nav{
        width:42px;
        height:64px;
        font-size:34px;
        line-height:64px;
    }

    .gallery-prev{
        left:8px;
    }

    .gallery-next{
        right:8px;
    }
}