.nxb-gallery__grid { display: grid; grid-template-columns: repeat(var(--nxb-gallery-columns,3),1fr); gap: .8rem; }
.nxb-gallery__item { display: block; overflow: hidden; border-radius: var(--nxb-radius-small); background: var(--nxb-colour-surface); }
.nxb-gallery__item img { width: 100%; aspect-ratio: 4/3; transition: transform .25s ease; }
.nxb-gallery__item:hover img { transform: scale(1.025); }
html:has(.nxb-gallery__dialog[open]) { overflow: hidden; }
.nxb-gallery__dialog { width: min(94vw,86rem); max-width: none; height: min(92vh,58rem); max-height: none; padding: 0; border: 0; overflow: hidden; color: #fff; background: #050909; }
.nxb-gallery__dialog::backdrop { background: rgba(0,0,0,.86); backdrop-filter: blur(4px); }
.nxb-gallery__dialog figure { display: grid; grid-template-rows: minmax(0,1fr) auto; gap: .75rem; width: 100%; height: 100%; margin: 0; padding: .75rem 0 2.75rem; }
.nxb-gallery__stage { position: relative; min-width: 0; min-height: 0; }
.nxb-gallery__dialog figure img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.nxb-gallery__dialog figcaption { min-height: 2rem; padding: .25rem 4rem 0; color: rgba(255,255,255,.8); line-height: 1.45; overflow-wrap: anywhere; text-align: center; }
.nxb-gallery__close, .nxb-gallery__previous, .nxb-gallery__next { position: absolute; z-index: 2; display: grid; width: 3rem; height: 3rem; padding: 0; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(0,0,0,.72); line-height: 1; cursor: pointer; }
.nxb-gallery__close svg, .nxb-gallery__previous svg, .nxb-gallery__next svg { display: block; width: 1.65rem; height: 1.65rem; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.nxb-gallery__close { top: .8rem; right: .8rem; }
.nxb-gallery__previous, .nxb-gallery__next { top: 50%; transform: translateY(-50%); }
.nxb-gallery__previous { left: .8rem; }
.nxb-gallery__next { right: .8rem; }
.nxb-gallery__position { position: absolute; right: 0; bottom: .5rem; left: 0; margin: 0; text-align: center; }
@media (max-width: 760px) { .nxb-gallery__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .nxb-gallery__grid { grid-template-columns: 1fr; } .nxb-gallery__dialog { width: 100%; height: 100vh; height: 100dvh; } .nxb-gallery__dialog figcaption { padding-inline: 1rem; } .nxb-gallery__previous { left: .5rem; } .nxb-gallery__next { right: .5rem; } }