.page-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 24px;
    grid-template-areas:
        "header"
        "main"
        "footer";
}

.grid-header { grid-area: header; padding: 2em 2em 2em 60px; background: linear-gradient(135deg, #202020, #343a40); color:#fff; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.2); }
.grid-main { grid-area: main; }
.grid-footer { grid-area: footer; }

.news-articles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.news-article-item {
    background-color: #fff;
    padding: 25px;
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    border-left: 5px solid #0d6efd;
    transition: transform 0.18s ease-in-out, box-shadow 0.2s ease-in-out;
}

.news-article-item:hover { transform: translateY(-6px); box-shadow: 0 16px 28px rgba(0,0,0,0.15); }

.news-article-item h2 {
    font-size: 1.8em;
    color: #007bff;
    margin-bottom: 10px;
}

.news-meta {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 15px;
}

.news-article-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

.circular-image {
    border-radius: 50%;
    width: 150px; 
    height: 150px;
    object-fit: cover; 
    display: block;
    margin: 0 auto 15px auto;
}

.news-article-item p {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 15px;
}

.news-article-item .read-more { display:inline-block; background-color:#0d6efd; color:#fff; padding:9px 16px; text-decoration:none; border-radius:999px; font-weight:700; box-shadow:0 6px 14px rgba(13,110,253,0.25); transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; }

.news-article-item .read-more:hover { background-color:#0b5ed7; transform: translateY(-2px); box-shadow:0 10px 20px rgba(13,110,253,0.35); }