.np-pg{display:grid;grid-template-columns:var(--np-pg-thumbs-w) 1fr;grid-template-areas:"thumbs main";gap:var(--np-pg-gap);align-items:stretch;width:100%;max-width:100%}
.np-pg *{box-sizing:border-box}
.np-pg{--np-pg-thumb:var(--np-pg-thumbs-w);--np-pg-arrow-shift:10px}
.np-pg--single{grid-template-columns:1fr;grid-template-areas:"main"}
.np-pg__thumbs{grid-area:thumbs;position:relative;height:var(--np-pg-main-h, 100%);width:var(--np-pg-thumbs-w);max-width:100%;min-width:0;display:flex;flex-direction:column;gap:10px}
.np-pg__thumbsScroller{flex:1;overflow:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:10px}
.np-pg__thumbsScroller::-webkit-scrollbar{display:none}
.np-pg__thumb{appearance:none;border:0;padding:0;background:transparent;cursor:pointer;outline:0;position:relative}
.np-pg__thumb::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px rgba(0,0,0,.12);opacity:0;transition:opacity .15s ease}
.np-pg__thumb:hover::after{opacity:1;box-shadow:inset 0 0 0 2px #178F4B}
.np-pg__thumb.is-active::after{opacity:1;box-shadow:inset 0 0 0 2px #178F4B}
.np-pg__thumbImg{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.np-pg__arrow{appearance:none;border:0;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);width:38px;height:38px;border-radius:999px;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.18);position:absolute;left:50%;transform:translate(-50%,-50%);z-index:5;opacity:0;pointer-events:none;transition:opacity .15s ease}
.np-pg__thumbs:hover .np-pg__arrow{opacity:1;pointer-events:auto}
.np-pg__arrow--up{top:0}
.np-pg__arrow--down{top:0}
.np-pg__arrow:focus-visible{outline:2px solid rgba(0,0,0,.35);outline-offset:2px}
.np-pg__arrow::before{content:"";display:block;width:10px;height:10px;border-right:2px solid rgba(0,0,0,.7);border-bottom:2px solid rgba(0,0,0,.7);transform:rotate(-135deg);margin-top:2px}
.np-pg__arrow--down::before{transform:rotate(45deg);margin-top:-2px}
.np-pg__main{grid-area:main;min-width:0;max-width:100%;display:flex;align-items:flex-start;justify-content:center;position:relative;overflow:hidden;--np-zoom:1.8;--np-ox:50%;--np-oy:50%;cursor:zoom-in}
.np-pg__main.is-zoomed{cursor:zoom-out}
.np-pg__main.is-pending{cursor:wait}
.np-pg__mainImg{width:100%;max-width:100%;height:auto;object-fit:contain;display:block;pointer-events:none;transition:transform .06s ease-out,opacity .18s ease,filter .18s ease;will-change:transform;transform-origin:var(--np-ox) var(--np-oy)}
.np-pg__main.is-pending .np-pg__mainImg{opacity:.88;filter:blur(.8px)}
.np-pg__main.is-zoomed .np-pg__mainImg{transform:scale(var(--np-zoom))}
@media (max-width:1024px){
  .np-pg{grid-template-columns:1fr;grid-template-areas:"main" "thumbs"}
  .np-pg{--np-pg-thumb:94px}
  .np-pg__thumbs{width:100%;height:auto;flex-direction:row;align-items:stretch}
  .np-pg__arrow{display:none}
  .np-pg__thumbsScroller{flex-direction:row;overflow:auto;min-width:0}
  .np-pg__thumb{flex:0 0 auto;width:94px}
}