@media (max-width:991px){
    .gallery{
        display: block;
    }
    .img-btn-prev{
        left: 1vw;
        height: 65px;
        
    }
    .img-btn-next{
        right: 1vw;
        height: 65px;
    }

}
@media (min-width:992px){
    .gallery{
        display: grid;
    }
}

.gallery{
    margin-top: 6vh;
    width: 100%;
    
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    grid-template-areas:"img1 img2 img3"
                        "img4 img5 img6"
                        "img7 img8 img9"
                        "img10 img11 img12";
}

.gallery-img{
    width: 100%;

    height: 300px;
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;

}


.galleryimg{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.galleryimg:hover{
    opacity: 0.7;
}

.img-window{
    width: 100vw;
    height: 100vh;

    background-color: rgba(0, 0, 0, 0.8);
    position:fixed;
    top: 0;
    left: 0;
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;

}
.img-window img{
    max-height: 80vh;
    max-width: 80vw;
}

.img-btn-prev, .img-btn-next {
    display: block;
    padding: 6px 10px;
    border-radius: 4px;
    position: fixed;
    top: 48 vh;
    z-index: 500;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    cursor: pointer;

}
.img-btn-prev{
    left: 1vw
}
.img-btn-next{
    right: 1vw;
}
.img-btn-next:hover ,.img-btn-prev:hover{
    opacity: 0.8;
}