.nb-image-gallery {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: visible;
    gap: var(--nb-ig-gap, 16px);
    --nb-ig-collapsed-w: 100px;
    --nb-ig-hover-w: 200px;
    --nb-ig-collapsed-h: 340px;
    --nb-ig-hover-h: 400px;
    --nb-ig-open-size: 500px;
    --nb-ig-gap: 16px;
    --nb-ig-dur: 0.3s;
    --nb-ig-ease: ease-in-out;
}

.nb-image-gallery__backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.nb-image-gallery.is-open .nb-image-gallery__backdrop {
    pointer-events: auto;
}

.nb-image-gallery__bar {
    box-sizing: border-box;
    flex: none;
    width: var(--nb-ig-collapsed-w, 100px);
    height: var(--nb-ig-collapsed-h, 340px);
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    position: relative;
    z-index: 2;
    background-color: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: width, height;
}

.nb-image-gallery.is-open .nb-image-gallery__bar,
.nb-image-gallery.is-closing .nb-image-gallery__bar {
    transition:
        width var(--nb-ig-dur, 0.3s) var(--nb-ig-ease, ease-in-out),
        height var(--nb-ig-dur, 0.3s) var(--nb-ig-ease, ease-in-out),
        filter var(--nb-ig-dur, 0.3s) var(--nb-ig-ease, ease-in-out),
        opacity var(--nb-ig-dur, 0.3s) var(--nb-ig-ease, ease-in-out);
}

.nb-image-gallery__empty {
    margin: 0;
    opacity: 0.5;
    font-size: 14px;
}