:root {
  --site-color-gallery-bg: #000000;
  --site-color-on-gallery-bg: #ffffff;
}


/* Thumbnail view before gallery */

#gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--md-unit) * 2);
    justify-content: left;
    list-style: none;
    margin: 0;
    padding: 0;
}

#gallery-thumbs li {
    width: calc(25% - 1.5*var(--md-unit));
    aspect-ratio: 4/3;
}

#gallery-thumbs .olefabase-gallery-image > img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
}


/* OLEFA Gallery adaptations */

body .oc-ui-web-dialog-gallery::before {
    background-color: var(--site-color-gallery-bg);
}
body .oc-ui-web-dialog-gallery__nav {
    display: none;
}
body .oc-ui-web-dialog-gallery__main-header {
    background-color: var(--site-color-gallery-bg);
    color: var(--site-color-on-gallery-bg);
}
body .oc-ui-web-dialog-gallery__main-nav span {
    color: var(--site-color-on-gallery-bg);
}
body .oc-ui-web-dialog-gallery__main-footer {
    background-color: var(--site-color-gallery-bg);
    color: var(--site-color-on-gallery-bg);
}



@media only screen and (max-width:900px) {
    #gallery-thumbs li {
        width: calc(33% - 1.1*var(--md-unit));
    }
}

@media only screen and (max-width:600px) {
    #gallery-thumbs li {
        width: calc(50% - var(--md-unit));
    }
}