/*======================================================

                GALLERY PREVIEW

======================================================*/

.gallery-preview{

    padding:140px 0;

    background:#f5f5f7;

}

/*======================================================

                SECTION HEADING

======================================================*/

.gallery-preview .section-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 80px;

}

.gallery-preview .section-heading span{

    display:inline-block;

    font-size:14px;

    font-weight:600;

    letter-spacing:5px;

    color:#777;

    text-transform:uppercase;

    margin-bottom:15px;

}

.gallery-preview .section-heading h2{

    font-size:52px;

    font-weight:700;

    color:#111;

    margin-bottom:20px;

}

.gallery-preview .section-heading p{

    font-size:18px;

    line-height:1.8;

    color:#666;

}

/*======================================================

                GALLERY GRID

======================================================*/

.gallery-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:25px;

}

/*======================================================

                GALLERY CARD

======================================================*/

.gallery-item{

    position:relative;

    display:block;

    overflow:hidden;

    border-radius:28px;

    background:#fff;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

    transition:all .45s ease;

}

.gallery-item.large{

    height:620px;

}

.gallery-item.small{

    height:297px;

}

.gallery-item img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .6s ease;

}

/*======================================================

                HOVER EFFECT

======================================================*/

.gallery-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.35),

        rgba(0,0,0,0)

    );

    opacity:0;

    transition:.4s;

    z-index:1;

}

.gallery-item:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.gallery-item:hover img{

    transform:scale(1.06);

}

.gallery-item:hover::before{

    opacity:1;

}

/*======================================================

                BUTTON

======================================================*/

.gallery-btn{

    margin-top:70px;

    text-align:center;

}

.gallery-btn .primary-btn{

    width:240px;

    height:60px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    background:#000;

    color:#fff;

    font-size:17px;

    font-weight:600;

    transition:.35s;

}

.gallery-btn .primary-btn:hover{

    transform:translateY(-4px);

    background:#222;

    color:#fff;

}

/*======================================================

                RESPONSIVE

======================================================*/

@media (max-width:992px){

.gallery-preview{

    padding:100px 0;

}

.gallery-preview .section-heading{

    margin-bottom:50px;

}

.gallery-preview .section-heading h2{

    font-size:38px;

}

.gallery-grid{

    grid-template-columns:1fr;

}

.gallery-item.large,

.gallery-item.small{

    height:350px;

}

.gallery-btn{

    margin-top:50px;

}

.gallery-btn .primary-btn{

    width:220px;

    height:56px;

}

}