.lightbox{position:fixed;inset:0;z-index:5000;background:rgba(15,13,11,.96);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-width:88vw;max-height:84vh;object-fit:contain;box-shadow:0 20px 70px rgba(0,0,0,.55);opacity:0;transform:scale(.98);transition:opacity .3s,transform .3s}
.lightbox.is-open img{opacity:1;transform:scale(1)}
.lightbox-close,.lightbox-nav{position:absolute;border-radius:50%;border:1px solid rgba(236,231,222,.35);background:rgba(15,13,11,.45);color:#ECE7DE;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s}
.lightbox-close:hover,.lightbox-nav:hover{background:rgba(236,231,222,.18);border-color:rgba(236,231,222,.7)}
.lightbox-close{top:24px;right:clamp(20px,4vw,56px);width:44px;height:44px;font-size:20px;line-height:1}
.lightbox-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:22px}
.lightbox-prev{left:clamp(12px,3vw,40px)}
.lightbox-next{right:clamp(12px,3vw,40px)}
.lightbox-counter{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:3px;color:rgba(236,231,222,.65);font-family:'Jost',sans-serif;text-transform:uppercase}
@media(max-width:700px){
  .lightbox-nav{width:40px;height:40px;font-size:17px}
  .lightbox-close{width:38px;height:38px;font-size:17px}
}