/**
 * ==========================================================================
 * MultiPress Homepage v2
 * ==========================================================================
 */

#homepage{
    padding:24px 0 40px;
    background:#f5f5f5;
}

.mp-container{
    width:min(1400px,calc(100% - 32px));
    margin:0 auto;
}

/* ==========================================================
   ROW 1
========================================================== */

.ticker{
    margin-bottom:24px;
}

/* ==========================================================
   HERO LAYOUT
========================================================== */

.mp-home-hero{
    display:grid;
    grid-template-columns:280px minmax(0,1fr) 320px;
    gap:24px;
    align-items:start;
    margin-bottom:40px;
}

/* ==========================================================
   LEFT SIDEBAR
========================================================== */

.mp-home-sidebar-left{
    min-width:0;
}

/* ==========================================================
   CENTER
========================================================== */

.mp-home-main{
    min-width:0;
}

.mp-home-main .mp-hero{
    width:100%;
}

/* ==========================================================
   RIGHT SIDEBAR
========================================================== */

.mp-home-sidebar-right{
    min-width:0;
}

/* ==========================================================
   CONTENT
========================================================== */

.mp-home-content{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:24px;
    margin-bottom:40px;
}

/* ==========================================================
   CATEGORY SECTIONS
========================================================== */

.mp-home-categories{
    display:flex;
    flex-direction:column;
    gap:40px;
}

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

.mp-home-sidebar-left>*,
.mp-home-sidebar-right>*,
.mp-home-main>*{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
}

/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (max-width:1300px){

    .mp-home-hero{
        grid-template-columns:250px minmax(0,1fr) 300px;
    }

}

/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1100px){

    .mp-home-hero{
        grid-template-columns:240px minmax(0,1fr);
    }

    .mp-home-sidebar-right{
        grid-column:1/-1;
    }

    .mp-home-content{
        grid-template-columns:1fr;
    }

}

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

@media (max-width:900px){

    .mp-home-hero{
        grid-template-columns:1fr;
    }

    .mp-home-sidebar-left,
    .mp-home-main,
    .mp-home-sidebar-right{
        width:100%;
    }

}

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

@media (max-width:640px){

    #homepage{
        padding:16px 0 24px;
    }

    .mp-container{
        width:calc(100% - 20px);
    }

    .mp-home-hero{
        gap:18px;
    }

    .mp-home-content{
        gap:18px;
    }

}