/**
 * ==========================================================================
 * MultiPress Homepage v2.2
 * ==========================================================================
 */

#homepage{

    padding:24px 0 40px;

    background:#f5f5f5;

}

.mp-container{

    width:min(1400px,calc(100% - 32px));

    margin:0 auto;

}

/* ==========================================================
   TRENDING
========================================================== */

.ticker{

    margin-bottom:24px;

}

/* ==========================================================
   MAIN LAYOUT
========================================================== */

.mp-home-layout{

    display:grid;

    grid-template-columns:280px minmax(0,1fr) 320px;

    gap:24px;

    align-items:start;

    margin-bottom:40px;

}

/* ==========================================================
   STICKY SIDEBARS
========================================================== */

.mp-home-sidebar-left,
.mp-home-sidebar-right{

    min-width:0;

    position:sticky;

    top:90px;

    align-self:start;

    height:fit-content;

}

.mp-home-center{

    display:flex;

    flex-direction:column;

    gap:24px;

    min-width:0;

}

.mp-home-grid{

    width:100%;

    margin:0;

}

.mp-home-mixed{

    margin-bottom:40px;

}

.mp-home-categories{

    display:flex;

    flex-direction:column;

    gap:40px;

}

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

.mp-home-sidebar-left>*,
.mp-home-sidebar-right>*,
.mp-home-center>*{

    background:#fff;

    border-radius:12px;

    overflow:hidden;

}

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

@media (max-width:1300px){

    .mp-home-layout{

        grid-template-columns:250px minmax(0,1fr) 300px;

    }

}

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

@media (max-width:1100px){

    .mp-home-layout{

        grid-template-columns:240px minmax(0,1fr);

    }

    .mp-home-sidebar-right{

        grid-column:1/-1;

        position:static;

        top:auto;

    }

}

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

@media (max-width:900px){

    /*
     * Switch to flex because CSS Grid ignores order.
     */

    .mp-home-layout{

        display:flex;

        flex-direction:column;

        gap:20px;

    }

    /*
     * Disable sticky
     */

    .mp-home-sidebar-left,
    .mp-home-sidebar-right{

        position:static;

        top:auto;

        width:100%;

    }

    /*
     * Homepage order
     */

    .mp-home-center{

        order:1;

    }

    .mp-home-sidebar-left{

        order:2;

    }

    .mp-home-sidebar-right{

        order:99;

    }

    /*
     * Sections after hero/news
     */

    .mp-home-mixed{

        order:3;

    }

    .mp-home-categories{

        order:4;

    }

}

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

@media (max-width:640px){

    #homepage{

        padding:16px 0 24px;

    }

    .mp-container{

        width:calc(100% - 20px);

    }

    .mp-home-layout{

        gap:18px;

    }

}

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

@media (max-width:480px){

    .mp-home-layout{

        gap:16px;

    }

}