/*======================================
FRAMEWORK 10 GALLERY
======================================*/

.gallery{

padding:var(--space-2xl) 0;

}

.gallery-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

grid-auto-rows:260px;

gap:22px;

margin-top:80px;

}

.gallery-item{

overflow:hidden;

border-radius:var(--radius-lg);

cursor:pointer;

position:relative;

}

.gallery-item img{

width:100%;

height:100%;

object-fit:cover;

transition:var(--transition);

}

.gallery-item::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

180deg,

transparent,

rgba(0,0,0,.45));

opacity:0;

transition:var(--transition);

}

.gallery-item:hover img{

transform:scale(1.12);

}

.gallery-item:hover::after{

opacity:1;

}

.large{

grid-row:span 2;

}

.wide{

grid-column:span 2;

}

.lightbox{

position:fixed;

inset:0;

border-radius:var(--radius-lg);

display:none;

justify-content:center;

align-items:center;

z-index:99999;

}

.lightbox.active{

display:flex;

}

.lightbox-image{

max-width:90%;

max-height:85vh;

border-radius:var(--radius-lg);

}

.close{

position:absolute;

top:40px;

right:50px;

font-size:46px;

cursor:pointer;

color:white;

}

@media(max-width:992px){

.gallery-grid{

grid-template-columns:1fr;

grid-auto-rows:260px;

}

.large,

.wide{

grid-row:auto;

grid-column:auto;

}

}