*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    font-family:Arial, Helvetica, sans-serif;

    background:#f3f4f6;

    color:#222;

}



.container{

    width:95%;

    max-width:1400px;

    margin:auto;

}



/* Header */

.navbar{

    background:#587ebf;

    color:white;

    padding:20px 0;

    margin-bottom:20px;

}


.navbar h1{

    font-size:24px;

}



.navbar p{

    font-size:13px;

    opacity:.9;

}



/* Main Grid */

.news-grid{

    display:grid;

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

    gap:15px;

}



/* Category Section */

.news-section{

    background:white;

    padding:15px;

    border-radius:8px;

    box-shadow:
    0 1px 5px rgba(0,0,0,.08);

    min-height:220px;

}



.news-section h2{

    font-size:16px;

    padding-bottom:8px;

    margin-bottom:10px;

    border-bottom:

    2px solid #0d6efd;

}



/* News Item */

.news-card{

    padding:8px 0;

    border-bottom:

    1px solid #eeeeee;

}


.news-card:last-child{

    border-bottom:none;

}



.news-card a{

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;


    color:#222;

    font-size:13px;

    line-height:1.4;

    text-decoration:none;

}



.news-card a:hover{

    color:#0d6efd;

}



/* Source */

.meta{

    margin-top:4px;

    font-size:11px;

    color:#888;

}



/* Empty Category */

.empty{

    font-size:13px;

    color:#999;

}



/* Tablet */

@media(max-width:1100px){


    .news-grid{

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

    }


}



/* Mobile */

@media(max-width:600px){


    .container{

        width:92%;

    }


    .news-grid{

        grid-template-columns:
        1fr;

    }


    .navbar h1{

        font-size:20px;

    }


}