/* ===========================
   LIGHTBOX
=========================== */

.lightbox{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:999;

    background:rgba(40,25,35,.85);

    opacity:0;

    pointer-events:none;

    transition:opacity .4s ease;

}


.lightbox.active{

    opacity:1;

    pointer-events:auto;

}


.lightbox img{

    display:block;

    width:auto;

    height:auto;

    max-width:85%;

    max-height:85vh;

    border-radius:30px;

    box-shadow:
        0 40px 100px rgba(0,0,0,.35);

    object-fit:contain;

    transform:scale(.9);

    transition:transform .4s ease;

}


.lightbox.active img{

    transform:scale(1);

}


.lightbox-close{

    position:absolute;

    top:30px;

    right:40px;

    z-index:2;

    padding:0;

    border:none;

    color:white;

    background:none;

    font-size:3rem;

    line-height:1;

    cursor:pointer;

}


/* ===========================
   MOBILE
=========================== */

@media(max-width:600px){

    .lightbox img{

        max-width:92%;

        max-height:75vh;

        border-radius:20px;

    }


    .lightbox-close{

        top:15px;

        right:20px;

        font-size:2.5rem;

    }

}