/*=========================================
        GALLERY
=========================================*/

.gallery-section{
    padding:90px 0;
    background-color: #fff;
   
}

.gallery-heading{
    width:90%;
    max-width:900px;
    margin:auto;
    text-align:center;
    margin-bottom:60px;
}

.gallery-heading span{
    color:#fff;
    letter-spacing:4px;
    text-transform:uppercase;
    font-weight:600;
    font-size:15px;
}

.gallery-heading h2{
    font-family:'League Gothic',sans-serif;
    font-size:72px;
    color:#393d40;
    margin:15px 0;
    text-transform:uppercase;
}

.gallery-heading p{
    font-family:'Montserrat',sans-serif;
    color:#666;
    line-height:2;
}

.gallery-grid{

    width:90%;
    max-width:1400px;
    margin:auto;

    display:grid;

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

    grid-auto-rows:220px;

    gap:20px;

}

.gallery-item{

    overflow:hidden;

    border-radius:18px;

    cursor:pointer;

  

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.gallery-item.tall{

    grid-row:span 2;

}

.gallery-item.wide{

    grid-column:span 2;

}
@media(max-width:991px){

.gallery-grid{

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

}

.gallery-item.wide{

    grid-column:span 2;

}

}
/*=========================================
        MOBILE MASONRY GALLERY
=========================================*/
@media (max-width:768px){

.gallery-grid{

    width:95%;
    margin:auto;

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

    gap:12px;

    grid-auto-rows:120px;
}

/* Normal image */
.gallery-item{
    grid-row:span 2;
    overflow:hidden;
    border-radius:12px;
}

/* Tall image */
.gallery-item.tall{
    grid-row:span 3;
}

/* Wide image */
.gallery-item.wide{
    grid-column:span 2;
    grid-row:span 2;
}

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

}
/*=========================================
        POPUP
=========================================*/

.gallery-popup{

    display:none;

    position:fixed;

    left:0;
    top:0;

    width:100%;
    height:100%;

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

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.gallery-popup img{

    max-width:90%;

    max-height:90%;

    border-radius:12px;

}

.popup-close{

    position:absolute;

    right:35px;

    top:20px;

    color:#fff;

    font-size:55px;

    cursor:pointer;

}