/* GRID TRAVADO */

.grid-galeria{
display:grid;
grid-template-columns: 2.4fr 1fr;
gap:16px;
height:540px;
overflow:hidden;
}

.foto-wrap{
width:100%;
height:100%;
overflow:hidden;
border-radius:8px;
}

.foto-principal{
width:100%;
height:100%;
object-fit:cover;
cursor:pointer;
transition:.4s;
}

.foto-principal:hover{
transform:scale(1.03);
}

/* MINIATURAS */

.coluna-miniaturas{
display:grid;
grid-template-rows:repeat(3,1fr);
gap:16px;
}

.miniatura{
width:100%;
height:100%;
object-fit:cover;
cursor:pointer;
border-radius:6px;
transition:.3s;
}

.miniatura:hover{
transform:scale(1.05);
}


@keyframes fade{
from{opacity:0}
to{opacity:1}
}

/* LIGHTBOX FUNDO */
.lightbox{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,.92);

justify-content:center;
align-items:center;

z-index:9999;

/* UX */
cursor:zoom-out;
}


/* IMAGEM */
#lightboxImg{

width:50%;
max-width:900px;
max-height:75vh;

object-fit:contain;

border-radius:14px;

box-shadow:0 20px 80px rgba(0,0,0,.6);

transition:.25s;
}


/* BOTÃO CLOSE */
.close{

position:absolute;
top:30%;
right:45px;

font-size:38px;
color:#fff;

cursor:pointer;

transition:.2s;
}

.close:hover{
transform:scale(1.15);
}


/* SETAS */
.seta{

position:absolute;
top:50%;
transform:translateY(-50%);

background:rgba(255,255,255,.08);
border:none;

width:55px;
height:55px;

border-radius:50%;

font-size:26px;
color:#fff;

cursor:pointer;

backdrop-filter:blur(4px);

transition:.2s;
}

.seta:hover{
background:rgba(255,255,255,.18);
}

.esquerda{
left:40px;
}

.direita{
right:40px;
}

.prev{ left:40px; }
.next{ right:40px; }

@media(max-width:1024px){

#lightboxImg{
width:70%;
max-height:70vh;
}

.seta{
width:55px;
height:55px;
font-size:26px;
}

}


@media(max-width:768px){

.lightbox{
padding:15px;
}

#lightboxImg{
width:90%;
max-height:65vh;
border-radius:6px;
}

/* setas menores */

.seta{
width:45px;
height:45px;
font-size:22px;
}

.prev{ left:10px; }
.next{ right:10px; }

.fechar{
top:30%;
right:15px;
font-size:30px;
}

}