/* GALERIA */
/* .gallery{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:2px;
}

.gallery-item{
    position:relative;
    overflow:hidden;
    aspect-ratio:1/1;
    cursor:pointer;
    background:#f1f1f1;
}

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.4s ease;
} */

.gallery{
    display:grid;

    /* RESPONSIVO AUTOMÁTICO */
    grid-template-columns:repeat(auto-fit, minmax(360px, 1fr));

    gap:2px;
}

/* ITEM */
.gallery-item{
    position:relative;
    overflow:hidden;
    aspect-ratio:1/1;
    cursor:pointer;
    background:#f1f1f1;
}

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.4s ease;
} 

/* OVERLAY */
.gallery-item::before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.35);
    opacity:0;
    transition:.3s ease;
    z-index:1;
}

/* LUPA */
.gallery-item::after{
    content:'⌕';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%) scale(.7);
    font-size:38px;
    color:#fff;
    opacity:0;
    transition:.3s ease;
    z-index:2;
}

.gallery-item:hover img{
    transform:scale(1.06);
}

.gallery-item:hover::before,
.gallery-item:hover::after{
    opacity:1;
}

.gallery-item:hover::after{
    transform:translate(-50%, -50%) scale(1);
}

/* MODAL */
.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.92);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:.25s ease;
    z-index:9999;
    padding:20px;
}

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

.modal-image{
    max-width:min(900px, 90vw);
    max-height:90vh;
    object-fit:contain;
    border-radius:8px;
    background:#fff;
    padding:8px;
}

/* BOTÕES */
.modal-close,
.modal-nav{
    position:absolute;
    border:none;
    background:rgba(255,255,255,.08);
    color:#fff;
    cursor:pointer;
    transition:.2s ease;
    backdrop-filter:blur(5px);
}

.modal-close:hover,
.modal-nav:hover{
    background:rgba(255,255,255,.18);
}

/* FECHAR */
.modal-close{
    top:20px;
    right:20px;
    width:50px;
    height:50px;
    font-size:32px;
    border-radius:10px;
}

/* NAVEGAÇÃO */
.modal-nav{
    top:50%;
    transform:translateY(-50%);
    width:55px;
    height:55px;
    font-size:24px;
    border-radius:10px;
}

.modal-nav.prev{
    left:20px;
}

.modal-nav.next{
    right:20px;
}

/* RESPONSIVO */
@media (max-width:900px){

    .gallery{
        /* grid-template-columns:repeat(3, 1fr); */
        grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    }

}

@media (max-width:600px){

    .gallery{
        /* grid-template-columns:repeat(2, 1fr); */
        grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    }

    .modal-nav{
        width:45px;
        height:45px;
        font-size:20px;
    }

    .modal-close{
        width:45px;
        height:45px;
        font-size:28px;
    }

}