.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;
}