.lightbox{
position:fixed;
inset:0;
background:rgba(23,26,31,.92);
backdrop-filter:blur(3px);
-webkit-backdrop-filter:blur(3px);
display:flex;
justify-content:center;
align-items:center;
opacity:0;
visibility:hidden;
transition:.25s;
z-index:9999;
}

.lightbox.active{
opacity:1;
visibility:visible;
}

.lightbox__content{
position:relative;
width:100vw;
height:100vh;
overflow:hidden;
}

.lightbox__image-wrapper{
position:absolute;
top:30px;
left:90px;
right:90px;
bottom:30px;
display:flex;
justify-content:center;
align-items:center;
}

.lightbox__image-wrapper img,
.lightbox__image-wrapper video{
display:block;
max-width:100%;
max-height:100%;
width:auto;
height:auto;
object-fit:contain;
border-radius:12px;
user-select:none;
-webkit-user-drag:none;
}

.lightbox__counter{
position:absolute;
top:28px;
left:32px;
color:#fff;
font-size:18px;
font-weight:600;
z-index:20;
}

.lightbox__close{
position:absolute;
top:20px;
right:20px;
width:56px;
height:56px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.12);
color:#fff;
font-size:34px;
cursor:pointer;
transition:.2s;
z-index:20;
}

.lightbox__close:hover{
background:rgba(255,255,255,.22);
transform:scale(1.05);
}

.lightbox__arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:64px;
height:64px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.12);
color:#fff;
font-size:42px;
cursor:pointer;
transition:.2s;
display:flex;
align-items:center;
justify-content:center;
z-index:20;
}

.lightbox__arrow:hover{
background:rgba(255,255,255,.22);
transform:translateY(-50%) scale(1.06);
}

.lightbox__arrow--prev{
left:20px;
}

.lightbox__arrow--next{
right:20px;
}

.lightbox__thumbs{
display:none;
}

@media (max-width:900px){

.lightbox__image-wrapper{
left:70px;
right:70px;
top:24px;
bottom:24px;
}

.lightbox__arrow{
width:52px;
height:52px;
font-size:34px;
}

.lightbox__counter{
left:20px;
top:20px;
}

}

@media (max-width:600px){

.lightbox__image-wrapper{
left:16px;
right:16px;
top:70px;
bottom:16px;
}

.lightbox__arrow{
width:46px;
height:46px;
font-size:30px;
}

.lightbox__arrow--prev{
left:8px;
}

.lightbox__arrow--next{
right:8px;
}

}