.basicLightbox{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.8);opacity:.01;transition:opacity .4s ease;z-index:1000;will-change:opacity}.basicLightbox--visible{opacity:1}.basicLightbox__placeholder{max-width:100%;-webkit-transform:scale(.9);transform:scale(.9);transition:-webkit-transform .4s ease;transition:transform .4s ease;transition:transform .4s ease,-webkit-transform .4s ease;z-index:1;will-change:transform}.basicLightbox__placeholder>iframe:first-child:last-child,.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;max-width:95%;max-height:95%}.basicLightbox__placeholder>iframe:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{pointer-events:auto}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{width:auto;height:auto}.basicLightbox--iframe .basicLightbox__placeholder,.basicLightbox--img .basicLightbox__placeholder,.basicLightbox--video .basicLightbox__placeholder{width:100%;height:100%;pointer-events:none}.basicLightbox--visible .basicLightbox__placeholder{-webkit-transform:scale(1);transform:scale(1)}

.lightbox-image{max-width:90%;max-height:90vh;width:auto;height:auto;object-fit:contain}

.lightbox-counter{position:fixed;top:2rem;right:2rem;background:rgba(0,0,0,.75);color:#fff;padding:.65rem 1.1rem;border-radius:999px;font-size:.9rem;font-weight:600;letter-spacing:.02em;pointer-events:auto;backdrop-filter:blur(10px);z-index:1001}

.lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.75);border:none;color:#fff;width:3.5rem;height:3.5rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease;pointer-events:auto;backdrop-filter:blur(10px);z-index:1001}
.lightbox-nav svg{width:2rem;height:2rem;fill:currentColor}
.lightbox-nav:hover{background:rgba(0,0,0,.9);transform:translateY(-50%) scale(1.1)}
.lightbox-nav:active{transform:translateY(-50%) scale(.95)}
.lightbox-nav--prev{left:2rem}
.lightbox-nav--next{right:2rem}

/* Below SM (640px) */
@media(max-width:39.99rem){
  .lightbox-counter{top:1rem;right:1rem;font-size:.85rem;padding:.5rem .9rem}
  .lightbox-nav{width:3rem;height:3rem}
  .lightbox-nav svg{width:1.5rem;height:1.5rem}
  .lightbox-nav--prev{left:1rem}
  .lightbox-nav--next{right:1rem}
}