/* ==========================================================
   HARDIYANTO THEME
   RESPONSIVE
========================================================== */

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

@media (max-width:1400px){

    .container{

        width:1240px;

    }

}

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

@media (max-width:1200px){

    .container{

        width:100%;

        max-width:calc(100% - 40px);

    }

    .home-layout,
    .single-layout{

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

        gap:40px;

    }

    .featured-post{

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

    }

    .post-item{

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

    }

}

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

@media (max-width:992px){

    body{

        font-size:18px;

    }

    .header-inner{

        flex-direction:column;

        align-items:center;

        gap:24px;

        padding:24px 0;

    }

    .site-brand{

        text-align:center;

    }

    .main-navigation{

        margin:0;

    }

    .main-menu{

        flex-wrap:wrap;

        justify-content:center;

        gap:28px;

    }

    .header-search{

        margin-top:10px;

    }

    .home-layout,
    .single-layout{

        grid-template-columns:1fr;

    }

    .sidebar{

        position:static;

    }

    .featured-post{

        grid-template-columns:1fr;

        gap:28px;

    }

    .featured-title{

        font-size:40px;

    }

    .post-item{

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

    }

    .footer-top{

        grid-template-columns:1fr 1fr;

    }

}

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

@media (max-width:768px){

    .container{

        max-width:calc(100% - 28px);

    }

    body{

        font-size:17px;

    }

    .site-title{

        font-size:40px;

    }

    .main-menu{

        gap:20px;

    }

    .main-menu a{

        padding:10px 0;

    }

    .featured-post{

        padding:24px;

    }

    .featured-title{

        font-size:34px;

    }

    .post-item{

        grid-template-columns:1fr;

    }

    .post-thumb img{

        width:100%;

    }

    .single-post{

        padding:28px;

    }

    .single-title{

        font-size:38px;

    }

    .single-content{

        max-width:100%;

        font-size:18px;

    }

    .post-navigation{

        grid-template-columns:1fr;

    }

    .footer-top{

        grid-template-columns:1fr;

    }

    .footer-column{

        text-align:center;

    }

    .footer-description{

        margin-left:auto;

        margin-right:auto;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}

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

@media (max-width:576px){

    body{

        font-size:16px;

    }

    .container{

        max-width:calc(100% - 22px);

    }

    .site-title{

        font-size:32px;

    }

    .site-tagline{

        font-size:13px;

    }

    .featured-post{

        padding:20px;

    }

    .featured-title{

        font-size:30px;

    }

    .post-title{

        font-size:24px;

    }

    .post-excerpt{

        font-size:18px;

    }

    .single-title{

        font-size:30px;

    }

    .single-content{

        font-size:17px;

        line-height:1.85;

    }

    .widget-title{

        font-size:22px;

    }

    .sidebar-widget{

        padding:24px;

    }

    .footer-logo{

        font-size:30px;

    }

    .footer-bottom-menu{

        flex-direction:column;

        gap:12px;

    }

    .button{

        width:100%;

        justify-content:center;

    }

}

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

@media (max-width:420px){

    .container{

        max-width:calc(100% - 18px);

    }

    .site-title{

        font-size:28px;

    }

    .featured-title{

        font-size:26px;

    }

    .post-title{

        font-size:22px;

    }

    .single-title{

        font-size:26px;

    }

    .search-form{

        width:100%;

    }

    .search-field{

        width:100%;

    }

    .main-menu{

        gap:14px;

    }

    .main-menu a{

        font-size:14px;

    }

}