body{
    font-family:'DM Sans', sans-serif;
}

h1,h2,h3,h4,h5,h6{
    font-family:'DM Serif Display', serif;
    font-weight:400;
}


/* =========================
   FEATURED HOME
========================= */

.featured-home{
    padding-top:25px;
    padding-bottom:35px;
}


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

.featured-layout{
    display:grid;
    grid-template-columns:1.65fr 1fr;
    gap:14px;
}


/* =========================
   CARDS
========================= */

.feature-main,
.feature-small{
    position:relative;
    display:flex;
    flex-direction:column;
    width:100%;
    overflow:hidden;
    border-radius:6px;
    background:#fff;
    text-decoration:none;
    color:#171717;
}


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

.feature-main > img{
    position:relative !important;
    display:block !important;

    width:100% !important;
       height:390px !important;


    margin:0 !important;
    padding:0 !important;

    object-fit:cover !important;
    object-position:center center;

    transition:transform .45s ease;
}


/* =========================
   RIGHT SIDE
========================= */

.feature-side{
    display:grid;
    grid-template-rows:1fr 1fr;
    gap:14px;
    min-width:0;
}


/* =========================
   SMALL IMAGES
========================= */

.feature-small > img{
    position:relative !important;
    display:block !important;

    width:100% !important;
    height:175px !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:cover !important;
    object-position:center center;

    transition:transform .45s ease;
}


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

.feature-main:hover > img,
.feature-small:hover > img{
    transform:scale(1.025);
}


/* NO DARK OVERLAY */

.feature-shade{
    display:none;
}


/* =========================
   CONTENT BELOW IMAGE
========================= */

.feature-content{
    position:relative;
    z-index:2;

    padding:13px 4px 0;

    color:#171717;
    background:#fff;
}


/* =========================
   MAIN TITLE
========================= */

.feature-main h1{
    font-family:'DM Serif Display', serif;
    font-size:27px;
    line-height:1.2;
    font-weight:400;

    color:#171717;
    margin:0 0 7px;
}


/* =========================
   SMALL CARD CONTENT
========================= */

.feature-small .feature-content{
    padding:8px 2px 0;
}

.feature-small h2{
    font-family:'DM Serif Display', serif;
    font-size:18px;
    line-height:1.22;
    font-weight:400;

    color:#171717;
    margin:0 0 5px;
}


/* =========================
   META
========================= */

.feature-meta{
    display:flex;
    align-items:center;
    gap:12px;

    font-size:12px;
    color:#777;
}

.feature-meta span:first-child{
    color:#e6a000;
    letter-spacing:1px;
}


/* REMOVE OLD OVERLAY BORDER */

.feature-main:after,
.feature-small:after{
    display:none;
}


/* =========================
   TABLET
========================= */

@media(max-width:991px){

    .featured-layout{
        grid-template-columns:1.45fr 1fr;
        gap:12px;
    }

    .feature-side{
        gap:12px;
    }

    .feature-main > img{
        height:350px !important;
    }

    .feature-small > img{
        height:155px !important;
    }

    .feature-main h1{
        font-size:24px;
    }

    .feature-small h2{
        font-size:15px;
    }
}


/* =========================
   MOBILE
========================= */

@media(max-width:767px){

    .featured-home{
        padding-top:16px;
        padding-bottom:25px;
    }

    .featured-layout{
        display:block;
    }

    .feature-main{
        margin-bottom:18px;
    }

    .feature-main > img{
        height:300px !important;
    }

    .feature-main h1{
        font-size:23px;
    }

    .feature-main .feature-content{
        padding:11px 2px 0;
    }

    .feature-side{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:12px;
    }

    .feature-small > img{
        height:190px !important;
    }

    .feature-small h2{
        font-size:15px;
    }

    .feature-small .feature-meta span:first-child{
        display:none;
    }
}


/* =========================
   SMALL MOBILE
========================= */

@media(max-width:500px){

    .feature-main > img{
        height:270px !important;
    }

    .feature-side{
        grid-template-columns:1fr;
        gap:18px;
    }

    .feature-small > img{
        height:220px !important;
    }

    .feature-small h2{
        font-size:18px;
    }

    .feature-small .feature-meta span:first-child{
        display:inline;
    }
}