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

@media (min-width:1600px){

    :root{

        --hc-max-width:1500px;

    }

}

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

@media (max-width:1400px){

    :root{

        --hc-max-width:1320px;

    }

}

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

@media (max-width:1200px){

    :root{

        --hc-max-width:1140px;

    }

}

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

@media (max-width:991px){

    :root{

        --hc-gutter:18px;

    }

    #hc-main{

        padding-bottom:30px;

    }

    #hc-sidebar-left{

        margin-bottom:25px;

    }

    #hc-sidebar-right{

    }

    .site-branding{

        flex-direction:column;

        align-items:flex-start;

    }

    .site-branding__name{

        font-size:2rem;

    }

}

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

@media (max-width:768px){

    :root{

        --hc-gutter:15px;

    }

    #hc-banner{

        margin:15px 0;

    }

    #hc-banner img{

        border-radius:10px;

    }

    #hc-main{

        padding-bottom:20px;

    }

    .page-title{

        font-size:28px;

    }

    .node{

        padding:18px;

    }

}

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

@media (max-width:576px){

    :root{

        --hc-gutter:12px;

    }

    .page-title{

        font-size:24px;

    }

    .node{

        padding:15px;

    }

}