.mvgallery-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    background: #353535;
    z-index: 99999999999;
}

.mvgallery-modal .mvgallery-modal-body {
    position: relative;
    max-width: 1600px;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto 48px;
    grid-gap: 15px;
    
}

.mvgallery-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mvgallery-image img {
    max-height: 100%;
    max-height: calc(100vh - 83px);
}

#mv-gallery-slider {
    display: none;
    grid-column: span 1;
    max-width: calc(100vw - 20px);
    width: 100%;
}

#mv-gallery-slider .swiper-wrapper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

.mvgallery-controls {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mvgallery-controls > *:not(:first-child) {
    margin-left: 40px;
}

.mvgallery-left, .mvgallery-right, .mvgallery-close {
    height: 40px;
    width: 40px;
    background-size: cover;
}

.mvgallery-left {
    cursor: pointer;
    transition: opacity 0.33s;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cstyle%3E.a%7Bfill%3A%23fff%3B%7D%3C/style%3E%3Cpath%20d%3D%22M16%2032c8.8%200%2016-7.2%2016-16s-7.2-16-16-16-16%207.2-16%2016%207.2%2016%2016%2016zM16%203c7.2%200%2013%205.8%2013%2013s-5.8%2013-13%2013-13-5.8-13-13%205.8-13%2013-13z%22%20class%3D%22a%22/%3E%3Cpath%20d%3D%22M20.9%209.9l-2.8-2.8-8.9%208.9%208.9%208.9%202.8-2.8-6.1-6.1z%22%20class%3D%22a%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    z-index: 999;
}

.gallery-img:hover ~ .mvgallery-left {
    opacity: 0.5
}

.mvgallery-counter {
    color: #fff;
    font-size: 24px;
}

.mvgallery-right {
    cursor: pointer;
    transition: opacity 0.33s;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cstyle%3E.a%7Bfill%3A%23fff%3B%7D%3C/style%3E%3Cpath%20d%3D%22M16%200c-8.8%200-16%207.2-16%2016s7.2%2016%2016%2016%2016-7.2%2016-16-7.2-16-16-16zM16%2029c-7.2%200-13-5.8-13-13s5.8-13%2013-13%2013%205.8%2013%2013-5.8%2013-13%2013z%22%20class%3D%22a%22/%3E%3Cpath%20d%3D%22M11.1%2022.1l2.8%202.8%208.9-8.9-8.9-8.9-2.8%202.8%206.1%206.1z%22%20class%3D%22a%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    z-index: 999;
}

.gallery-img:hover ~ .mvgallery-right {
    opacity: 0.5
}

.mvgallery-close {
    cursor: pointer;
    transition: opacity 0.33s;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cstyle%3E.a%7Bfill%3A%23fff%3B%7D%3C/style%3E%3Cpath%20d%3D%22M16%200c-8.8%200-16%207.2-16%2016s7.2%2016%2016%2016%2016-7.2%2016-16-7.2-16-16-16zM16%2029c-7.2%200-13-5.8-13-13s5.8-13%2013-13%2013%205.8%2013%2013-5.8%2013-13%2013z%22%20class%3D%22a%22/%3E%3Cpath%20d%3D%22M21%208l-5%205-5-5-3%203%205%205-5%205%203%203%205-5%205%205%203-3-5-5%205-5z%22%20class%3D%22a%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    z-index: 999;
}

.gallery-img:hover ~ .mvgallery-close {
    opacity: 0.5
}

@media (min-width: 425px) {
    
    .mvgallery-modal .mvgallery-modal-body {
        grid-template-rows: auto 120px 40px;
    }
    
    .mvgallery-image img {
        max-height: calc(100vh - 210px);
    }
    
    #mv-gallery-slider {
        display: block;
    }
    
}

@media (min-width: 1200px), (orientation: landscape) {
    
    .mvgallery-modal .mvgallery-modal-body {
        grid-template-columns: 70px 1fr 150px;
        grid-template-rows: 100%;
    }
    
    .mvgallery-controls {
        grid-column: 1 / span 1;
        grid-row: 1;
        flex-direction: column;
    }
    
    .mvgallery-controls > * {
        margin-left: 0 !important;
        margin-top: 15px;
    }
    
    .mvgallery-controls .mvgallery-left {
        transform: rotate(90deg);
    }
    
    .mvgallery-controls .mvgallery-right {
        transform: rotate(90deg);
    }
    
    .mvgallery-image {
        grid-column: 2 / span 1;
    }
    
    .mvgallery-image img {
        max-height: calc(100vh - 20px);
    }
    
    #mv-gallery-slider {
        grid-column: 3 / span 1;
        height: unset;
        max-width: unset;
    }
    
    .mvgallery-left, .mvgallery-right, .mvgallery-close {
        height: 48px;
        width: 48px;
    }
    
}

@media (min-width: 1600px) {
    
    .mvgallery-modal .mvgallery-modal-body {
        grid-template-columns: 70px 1fr 200px;
    }
    
}