/* ===================================
   LARGE TABLET (1024px)
=================================== */

@media screen and (max-width:1024px){

    header{
        padding:15px 4%;
    }

    .main-grid{
        grid-template-columns:1fr;
        gap:40px;
        padding:40px 4%;
    }

    .top-stories{
        padding:40px 4%;
    }

    .hero{
        padding:0 4%;
    }

    .hero h1{
        font-size:40px;
    }

    .date-time{
        min-width:180px;
        font-size:14px;
    }

}

/* ===================================
   TABLET (768px)
=================================== */

@media screen and (max-width:768px){

    /* Header */

    header{

        flex-direction:column;

        gap:15px;

        text-align:center;

    }

    .logo a{

        justify-content:center;

    }

    .search-box{

        width:100%;

        padding:0;

    }

    .search-box input{

        max-width:100%;

    }

    .date-time{

        min-width:auto;

    }

    .header-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    /* Menu Button */

    #menuBtn{

        display:block;

    }

    /* Navigation */

    nav{

        display:none;

    }

    nav.active{

        display:block;

    }

    nav ul{

        flex-direction:column;

    }

    nav ul li{

        width:100%;

        text-align:center;

        border-bottom:1px solid rgba(255,255,255,.2);

    }

    nav ul li a{

        display:block;

        padding:15px;

    }

    /* Hero */

    .hero{

        height:auto;

        padding:80px 25px;

        text-align:center;

        justify-content:center;

    }

    .hero-content{

        max-width:100%;

    }

    .hero h1{

        font-size:34px;

    }

    .hero p{

        font-size:17px;

    }

    /* Breaking News */

    .breaking-news{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    /* News Grid */

    .main-grid{

        grid-template-columns:1fr;

    }

    .stories-grid{

        grid-template-columns:repeat(2,1fr);

    }

    /* Newsletter */

    .newsletter-form{

        flex-direction:column;

        align-items:center;

    }

    .newsletter-form input{

        width:100%;

        max-width:350px;

    }

}

/* ===================================
   MOBILE (576px)
=================================== */

@media screen and (max-width:576px){

    header{

        padding:15px;

    }

    .logo img{

        width:50px;

        height:50px;

    }

    .logo span{

        font-size:24px;

    }

    .hero{

        padding:60px 20px;

    }

    .hero h1{

        font-size:28px;

    }

    .hero p{

        font-size:15px;

    }

    .badge{

        font-size:12px;

        padding:6px 12px;

    }

    .read-btn{

        width:100%;

    }

    .main-grid{

        padding:30px 15px;

    }

    .top-stories{

        padding:30px 15px;

    }

    .stories-grid{

        grid-template-columns:1fr;

    }

    .mini-news{

        flex-direction:column;

    }

    .mini-news img{

        width:100%;

        height:180px;

    }

    .news-card img{

        height:200px;

    }

    .story-card img{

        height:200px;

    }

    .newsletter{

        padding:40px 20px;

    }

    .newsletter h2{

        font-size:24px;

    }

    .newsletter p{

        font-size:15px;

    }

    footer{

        padding:25px 15px;

    }

    .footer-links{

        display:flex;

        flex-direction:column;

        gap:12px;

    }

}

/* ===================================
   SMALL MOBILE (400px)
=================================== */

@media screen and (max-width:400px){

    .logo span{

        font-size:20px;

    }

    .hero h1{

        font-size:24px;

    }

    .hero p{

        font-size:14px;

    }

    .btn{

        width:100%;

    }

    .header-buttons{

        width:100%;

        flex-direction:column;

    }

    .search-box input{

        font-size:14px;

    }

    .date-time{

        font-size:13px;

    }

}