@media (max-width: 768px) {
    .article-content {
        font-size: 1rem;
    }

    .article-content .intro-paragraph {
        font-size: 1.1rem;
    }

    .article-meta {
        gap: 1rem;
        flex-direction: column;
    }

    .article-nav {
        flex-direction: column;
    }

    .nav-next {
        text-align: left;
    }

    .highlight-box {
        padding: 1.5rem;
    }
    .all-articles-container .article-card {
        flex: 0 1 100%;
    }
}
@media (max-width: 576px) {
    .hero-section {
        min-height: 60vh !important;
    }
    .article-card {
        flex: 0 1 100% !important;
        padding: 1.5rem;
        min-height: auto;
        position: relative !important;
        top: 0 !important;
    }

    .all-articles-container .article-card {
        flex: 0 1 100%;
    }
}