/*
 * CSS-only justified gallery (replaces jquery.justifiedGallery)
 * Every item grows proportionally to its aspect ratio (--ratio, set inline),
 * so all items in a row end up with the same height and fill the row.
 */
.justified-gallery {
    --justified-row-height: 170px;
    gap: 3px;
}
@media (max-width: 575.98px) {
    .justified-gallery {
        --justified-row-height: 120px;
    }
}
.justified-gallery > .gallery-item {
    flex: var(--ratio, 1) 1 calc(var(--ratio, 1) * var(--justified-row-height));
    width: auto;
    max-width: 100%;
    aspect-ratio: var(--ratio, 1);
    position: relative;
    overflow: hidden;
}
.justified-gallery > .gallery-item figure,
.justified-gallery > .gallery-item figure > a,
.justified-gallery > .gallery-item picture {
    display: block;
    width: 100%;
    height: 100%;
}
.justified-gallery > .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.justified-gallery > .gallery-item figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px;
    background-color: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: 12px;
    opacity: 0;
    transition: opacity .3s;
}
.justified-gallery > .gallery-item:hover figcaption {
    opacity: 1;
}
/* Last row is not stretched (former lastRow: 'nojustify') */
.justified-gallery::after {
    content: "";
    flex-grow: 999999;
}
/* Small galleries (up to 3 images) always use the full width */
.justified-gallery:not(:has(> .gallery-item:nth-of-type(4)))::after {
    display: none;
}