/* Settings start */
.justified-grid-gallery {
    --space: 12pt;
    --min-height: 400px;
    --last-row-background: rgb(188 234 153);
}

/* Settings end */

.justified-grid-gallery {
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--space);
    list-style: none;
    margin: 0 !important;
    /* We use !important to avoid gaps in some environments. */
    padding: 0 !important;
    /* We use !important to avoid gaps in some environments. */
}

.justified-grid-gallery>* {
    flex-grow: calc(var(--width) * (100000 / var(--height)));
    flex-basis: calc(var(--min-height) * (var(--width) / var(--height)));
    aspect-ratio: var(--width) / var(--height);

    position: relative;
    overflow: hidden;
    margin: 0 !important;
    object-fit: cover;
    /* We use !important to avoid gaps in some environments. */
    padding: 0 !important;
    /* We use !important to avoid gaps in some environments. */
}

.justified-grid-gallery>*>img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.justified-grid-gallery::after {
    content: " ";
    flex-grow: 1000000000;
    background: none;
}

.justifiedGridContainer {
    width: calc(100% - 88pt);
    margin-left: 44pt;
    margin-right: 44pt;
    box-sizing: border-box;
}

@media (max-width: 760px) {
    .justifiedGridContainer {
        width: calc(100% - 32pt);
        margin-left: 16pt;
        margin-right: 16pt;
    }
}

.justifiedGalleryImg {
    transition: filter 0.3s, opacity 0.3s, scale 0.3s;

    @starting-style {

        filter: blur(15px);
        opacity: 0;
        scale: 0.9;
    }
}

.justifiedGalleryImg:hover {
    cursor: url("img/picture zoom.svg"), auto;
}

.justifiedGalleryImg:active {
    scale: 0.98;
    z-index: 200;
}