/* home page */

/* =========================
   HERO PANEL
========================= */

/* ====================================
   HERO PANEL
==================================== */

/* =========================================
   NEW HERO GRID LAYOUT
========================================= */

.hero-panel{
    width:100%;
    padding:60px 0;
    background:#f7f3ef;

    /* override old styles */
    min-height:auto !important;
    display:block !important;
}

/* =========================================
   MAIN GRID
========================================= */

.split-grid{
    width:min(1400px, calc(100% - 60px));
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

/* =========================================
   COLUMN
========================================= */

.split-column{
    display:flex;
    flex-direction:column;
    gap:24px;
}

/* =========================================
   CARD
========================================= */

.grid-item{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    background:#ddd;
    height:260px;
}

/* LARGE CARD */

.grid-item.large{
    height:420px;
}

/* =========================================
   IMAGE
========================================= */

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

/* =========================================
   HOVER
========================================= */

.grid-item:hover img{
    transform:scale(1.04);
}

/* =========================================
   OVERLAY
========================================= */

.grid-item::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,0.45),
        rgba(0,0,0,0.05)
    );
}

/* =========================================
   TEXT
========================================= */

.overlay{
    position:absolute;
    left:35px;
    bottom:35px;
    z-index:5;
    color:#fff;
}

.overlay span{
    display:block;
    font-size:12px;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.overlay h2{
    font-size:46px;
    line-height:1.1;
    font-weight:500;
    max-width:500px;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:992px){

    .split-grid{
        grid-template-columns:1fr;
    }

    .grid-item.large{
        height:320px;
    }
}

@media(max-width:768px){

    .hero-panel{
        padding:30px 0;
    }

    .split-grid{
        width:calc(100% - 24px);
        gap:16px;
    }

    .split-column{
        gap:16px;
    }

    .grid-item{
        height:200px;
        border-radius:18px;
    }

    .grid-item.large{
        height:260px;
    }

    .overlay{
        left:20px;
        bottom:20px;
    }

    .overlay h2{
        font-size:28px;
    }
}