.gallery-container {
    padding: var(--container-padding);
    max-width: var(--container-width);
    margin-right: auto;
    margin-left: auto;
}

.gallery-container img {
    max-width: 100%;
    vertical-align: middle;
    height: auto;
}

.img-gallery__item .gallery-images-secondary{
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin-top: -40px;
}

/* Gallery layout */
:root {
    --gallery-gap: 1.5em;
    --gallery-items-per-row: 1;
}

.img-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gallery-gap);
}

.img-gallery__item {
    flex: 0 0
    calc(
            (100% - (var(--gallery-gap) * (var(--gallery-items-per-row) - 1))) /
            var(--gallery-items-per-row)
    );

    img {
        border-radius: var(--gallery-item-border-radius);
        aspect-ratio: 3 / 2;
        object-fit: contain;
    }
}

@media only screen and (width >= 1024px) {
    .img-gallery {
        --gallery-items-per-row: 4;
    }
}

@media only screen and (768px < width < 1024px) {
    .img-gallery {
        --gallery-items-per-row: 3;
    }
}

@media only screen and (540px < width < 768px) {
    .img-gallery {
        --gallery-items-per-row: 2;
    }
}

/* Gallery styles */
:root {
    --gallery-item-border-radius: 0.4em;
}

.img-gallery__item {
    figure {
        margin: 0;
    }

    figcaption {
        margin-top: 0.5rem;
        font-weight: bold;
        text-align: center;
    }

    img {
        border-radius: var(--gallery-item-border-radius);
    }
}

.sort-option-selected {
    color: red;
}
.sort-option {
    cursor: pointer;
    margin: -7px 0;
}