.image-list {
    margin-bottom: calc(var(--_image-title-bottom-offset) + 5px);
}

.image-list .image {
    --_background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: var(--_background-size) !important; /* to override inline styles */
    border-radius: 2px;
    cursor: zoom-in;
    min-height: 250px;
}

ul .files .folder-image:not(.zoomed):not(.prev):not(.next), ul.files .folder-image:not(.zoomed):not(.prev):not(.next) .image-zoomed {
    background-image: none !important;
}

.image-list .image .image-zoomed,
ul.files .folder-image .image-zoomed {
    background-color: rgba(255, 255, 255, .98);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    display: block;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: -5000px;
    top: 0;
    transition: opacity .12s linear .12s, left 0s linear .24s, top 0s linear .24s, right 0s linear .24s, bottom 0s linear .24s;
    z-index: 15000;
}

.image-list.no-stretch .image .image-zoomed,
ul.files .folder-image .image-zoomed {
    background-size: initial;
}

.image-list .image.zoomed .close-gallery,
ul.files .folder-image.zoomed .close-gallery {
    display: inline-block;
    height: 50px;
    pointer-events: all;
    position: absolute;
    right: 0;
    transition: opacity .24s;
    width: 50px;
    z-index: 100;
}

#fileStorageModal ul.files .folder-image.zoomed .close-gallery {
    top: 45px;
    right: 160px;
}

.image-list .image.zoomed .close-gallery a,
ul.files .folder-image.zoomed .close-gallery a {
    display: inline-block;
    height: 50px;
    width: 50px;
}

    .image-list .image.zoomed .close-gallery a:before,
    .image-list .image.zoomed .close-gallery a:after,
    ul.files .folder-image.zoomed .close-gallery a:before,
    ul.files .folder-image.zoomed .close-gallery a:after {
        border-left: solid 2px #999;
        content: ' ';
        cursor: pointer;
        display: block;
        height: 30px;
        opacity: .7;
        position: absolute;
        right: 0;
        width: 30px;
    }

    .image-list .image.zoomed .close-gallery a:before,
    ul.files .folder-image.zoomed .close-gallery a:before {
        top: 21px;
        transform: rotate(45deg);
    }

    .image-list .image.zoomed .close-gallery a:after,
    ul.files .folder-image.zoomed .close-gallery a:after {
        top: 0;
        transform: rotate(-45deg);
    }

.image-list .image.zoomed .image-zoomed,
ul.files .folder-image.zoomed .image-zoomed {
    bottom: 0;
    cursor: zoom-out;
    left: 0;
    opacity: 1;
    pointer-events: all;
    right: 0;
    top: 0;
    transition: opacity .24s;
}

.quick_view .image-list .image.zoomed .image-zoomed,
.quick_view ul.files .folder-image.zoomed .image-zoomed {
    right: 50px;
}

.image-list .image.zoomed.off-transition .image-zoomed,
ul.files .folder-image.zoomed.off-transition .image-zoomed {
    transition: none;
}

.image-list .image .arrows,
ul.files .folder-image .arrows {
    opacity: 0;
}

.image-list .image.zoomed .arrows,
ul.files .folder-image.zoomed .arrows {
    opacity: 1;
    padding: 0px 20px;
    position: absolute;
    top: calc(50% - 36px);
    transition: opacity .24s;
    width: 100%;
}

    .image-list .image.zoomed .arrows :is(.icon-angle-left, .icon-angle-right),
    ul.files .folder-image.zoomed .arrows :is(.icon-angle-left, .icon-angle-right) {
        --this-decor-color: #999;
        background: white;
        border: 2px solid var(--this-decor-color);
        border-radius: 50%;
        color: var(--this-decor-color);
        cursor: pointer;
        font-size: 45px;
        line-height: 70px;
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
    }

        .image-list .image.zoomed .arrows :is(.icon-angle-left, .icon-angle-right):before,
        ul.files .folder-image.zoomed .arrows :is(.icon-angle-left, .icon-angle-right):before {
            margin: 0;
        }

        .image-list .image.zoomed .arrows :is(.icon-angle-left, .icon-angle-right):hover,
        ul.files .folder-image.zoomed .arrows :is(.icon-angle-left, .icon-angle-right):hover {
            --this-decor-color: #000;
        }

    .image-list .image.zoomed .arrows .icon-angle-left,
    ul.files .folder-image.zoomed .arrows .icon-angle-left {
        float: left;
    }

    .image-list .image.zoomed .arrows .icon-angle-right,
    ul.files .folder-image.zoomed .arrows .icon-angle-right {
        float: right;
    }


.image-list {
    display: grid;
    flex-wrap: wrap;
    position: relative;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: calc(var(--half-margin) + var(--_image-title-bottom-offset) + 5px) var(--half-margin);
}

    .image-list .image .note {
        bottom: calc(0px - var(--_image-title-bottom-offset));
    }

@media screen and (max-width: 750px) {
    /*.ocd .image-list .image.zoomed .arrows, EM: This must not be in master */
    ul .files .folder-image.zoomed .arrows {
        bottom: 20px;
        top: initial;
    }
}