/*
==================================================
NextNews Pro - Homepage Layout
Version: 1.0.0
==================================================
*/


/* ==========================================
   Homepage Layout
========================================== */

.homepage-layout{

    display:grid;

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

    gap:35px;

    align-items:start;

}



/* ==========================================
   Main Content
========================================== */

.homepage-content{

    min-width:0;

}



/* ==========================================
   Sidebar Area
========================================== */

.homepage-sidebar{

    width:100%;

    position:relative;

}



/*
 Sticky Sidebar Ready
 Future Enable:
 position:sticky;
 top:20px;
*/




/* ==========================================
   Container Compatibility
========================================== */

.site-main{

    width:100%;

}



/* ==========================================
   Full Width Sections
========================================== */

.site-main > .breaking-news,
.site-main > .hero-section,
.site-main > .trending-news,
.site-main > .advertisement{

    width:100%;

}



/* ==========================================
   Responsive Tablet
========================================== */


@media(max-width:1200px){


    .homepage-layout{

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

        gap:25px;

    }


}



/* ==========================================
   Mobile Layout
========================================== */


@media(max-width:991px){


    .homepage-layout{

        grid-template-columns:1fr;

        gap:30px;

    }


    .homepage-sidebar{

        order:2;

    }


    .homepage-content{

        order:1;

    }


}



/* ==========================================
   Small Mobile
========================================== */


@media(max-width:576px){


    .homepage-layout{

        gap:20px;

    }


}



/* ==========================================
   Accessibility
========================================== */


@media(prefers-reduced-motion:reduce){


    .homepage-layout *{

        transition:none!important;

    }


}