:root {
    --image-gallery-gap: 20px;
    --image-gallery-items-per-row: 2;
    --image-gallery-transition: all .275s ease-in-out;
}

@media (min-width: 576px) {
    :root {
        --image-gallery-items-per-row: 3;
    }
}

@media (min-width: 992px) {
    :root {
        --image-gallery-items-per-row: 4;
    }
}

.ce.image-gallery > .images {
    display: flex;
    padding-top: 20px;
    flex-wrap: wrap;
    gap: var(--image-gallery-gap);
}

.ce.image-gallery > .images > .image-item {
    flex: 0 0 calc((100% - (var(--image-gallery-gap) * (var(--image-gallery-items-per-row) - 1))) / var(--image-gallery-items-per-row));
    overflow: hidden;
}

.ce.image-gallery > .images > .image-item > a {
    display: inline-block;
}

.ce.image-gallery > .images > .image-item > a:hover > img {
    -webkit-transform: scale(1.075);
    transform: scale(1.075);
}

.ce.image-gallery > .images > .image-item img {
    max-width: 100%;
    vertical-align: middle;
    height: auto;
    object-fit: cover;
    object-position: center;
    transform-origin: center;
    -webkit-transition: var(--image-gallery-transition);
    transition: var(--image-gallery-transition);
}

.ce.image-gallery > .images[data-gallery-layout='portrait'] > .image-item img {
    aspect-ratio: 3 / 4;
}

.ce.image-gallery > .images[data-gallery-layout='landscape'] > .image-item img {
    aspect-ratio: 4 / 3;
}