.s4y-lightbox[hidden] { display: none; }
.s4y-lightbox { position: fixed; z-index: 3000; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(8,12,22,.88); }
.s4y-lightbox-panel { position: relative; display: grid; justify-items: center; max-width: min(1440px,96vw); max-height: 94vh; }
.s4y-lightbox-image { display: block; width: auto; height: auto; max-width: 94vw; max-height: 84vh; object-fit: contain; border-radius: 10px; box-shadow: 0 20px 80px rgba(0,0,0,.4); }
.s4y-lightbox-close { position: absolute; z-index: 1; top: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; color: #fff; background: rgba(23,32,51,.9); font-size: 30px; line-height: 1; cursor: pointer; }
.s4y-lightbox-nav { position: absolute; z-index: 1; top: 42%; display: grid; place-items: center; width: 48px; height: 58px; border: 1px solid rgba(255,255,255,.28); border-radius: 12px; color: #fff; background: rgba(23,32,51,.82); font-size: 23px; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.s4y-lightbox-nav:hover { background: rgba(23,32,51,1); transform: scale(1.06); }
.s4y-lightbox-prev { left: 12px; }
.s4y-lightbox-next { right: 12px; }
.s4y-lightbox-caption { margin: 12px 52px 0; color: #fff; text-align: center; font-size: .95rem; }
body.s4y-lightbox-open { overflow: hidden; }

@media (max-width: 560px) {
  .s4y-lightbox { padding: 12px; }
  .s4y-lightbox-nav { width: 42px; height: 50px; top: 40%; }
  .s4y-lightbox-prev { left: 6px; }
  .s4y-lightbox-next { right: 6px; }
}