.stop-scrolling {
    height: 100%;
    overflow: hidden
}

.gallery {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    max-height: 80vh;
    overflow-y: scroll
}

.img-container {
    overflow: hidden
}

.img-container img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: all .3s ease-out
}

.img-container img:hover {
    transform: scale(1.2)
}

.gallery-modal {
    background: rgba(0, 0, 0, .8);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: .25s ease-out
}

.gallery-modal.open {
    opacity: 1;
    pointer-events: all
}

.modal-img {
    position: absolute;
    max-height: 85%;
    width: auto;
    max-width: 85%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.gallery-modal .arrow {
    position: absolute;
    top: 50%;
    cursor: pointer;
    padding: .7rem;
    border-radius: 100%;
    background-color: #5296ba;
    transition: .25s ease-out
}

.gallery-modal .arrow:hover {
    background-color: #6ecafa
}

.gallery-modal .arrow.left-arrow {
    left: 5%;
    transform: translateY(-50%) rotate(270deg);
    -ms-transform: translateY(-50%) rotate(270deg);
    -moz-transform: translateY(-50%) rotate(270deg);
    -webkit-transform: translateY(-50%) rotate(270deg);
    -o-transform: translateY(-50%) rotate(270deg)
}

.gallery-modal .arrow.right-arrow {
    right: 5%;
    transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    -moz-transform: translateY(-50%) rotate(90deg);
    -webkit-transform: translateY(-50%) rotate(90deg);
    -o-transform: translateY(-50%) rotate(90deg)
}

@media (max-width: 767px) {
    .gallery {
        max-height: 50vh;
        max-width: 90vw;
        grid-template-columns:repeat(auto-fit, minmax(80px, 1fr))
    }
}

@media (min-width: 768px) {
    .gallery {
        grid-template-columns:repeat(auto-fit, minmax(120px, 1fr))
    }
}

@media (min-width: 992px) {
    .gallery {
        grid-template-columns:repeat(auto-fit, minmax(150px, 1fr))
    }
}

@media (min-width: 1200px) {
    .gallery {
        grid-template-columns:repeat(auto-fit, minmax(180px, 1fr))
    }
}

@media (min-width: 1600px) {
    .gallery {
        grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))
    }
}