.nxb-gallery__grid { display: grid; grid-template-columns: repeat(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); }
.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; width: 100%; height: 100%; margin: 0; place-items: center; }
.nxb-gallery__dialog figure img { max-width: 100%; max-height: calc(100% - 4rem); object-fit: contain; }
.nxb-gallery__dialog figcaption { min-height: 2rem; padding: .5rem 5rem; color: rgba(255,255,255,.8); text-align: center; }
.nxb-gallery__close, .nxb-gallery__previous, .nxb-gallery__next { position: absolute; z-index: 2; display: grid; width: 3rem; height: 3rem; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(0,0,0,.62); cursor: pointer; }
.nxb-gallery__close { top: .8rem; right: .8rem; font-size: 2rem; }
.nxb-gallery__previous, .nxb-gallery__next { top: 50%; font-size: 2.6rem; 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: 100vw; height: 100vh; } }