@media (max-width: 768px) {
    /* General Content Adjustments */
    .news-content {
        margin-left: 5%;
        margin-right: 5%;
    }

    /* Adjust News Image Section */
    .news-image-section {
        height: 50vh;
        min-height: 40vh;
    }

    /* Adjust Text Overlay */
    .news-text-overlay h1,
    .news-text-overlay p {
        max-width: 90%;
        margin-left: 5%;
    }

    /* Article Styling */
    .articles-section {
        font-size: 20px;
    }

    .articles-name,
    .articles-title {
        font-size: large;
    }

    .articles-content-desc {
        font-size: small;
    }

    /* Button Adjustments */
    .btn-articles {
        width: 100%;
        font-size: medium;
        padding: 12px;
    }

    /* Adjust News Title & Meta */
    .news-title {
        font-size: 2rem;
        max-width: 90%;
    }

    .news-meta {
        font-size: 0.9rem;
    }

    .news-meta-container {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .category-badge {
        font-size: 13px;
        padding: 5px 12px;
    }

    .news-publish-info {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .publish-text,
    .news-date {
        font-size: 14px;
    }

    /* Adjust Image */
    .news-image img {
        width: 90%;
        height: auto;
        margin: 10px 15px 0 15px;
    }

    /* Adjust Related Articles */
    .related-articles-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
    }

    .related-article-image {
        height: 180px;
    }

    .related-article-title {
        font-size: 16px;
    }

    .related-article-intro,
    .read-more-text {
        font-size: 13px;
    }
}

/* Mobile (Max 576px) */
@media (max-width: 576px) {
    /* Hide Paragraph in Mobile */
    .news-text-overlay p {
        display: none;
    }

    /* Reduce Image Section Height */
    .news-image-section {
        height: 40vh;
    }

    /* Further Adjustments for Small Screens */
    .articles-section {
        font-size: 18px;
    }

    .articles-name,
    .articles-title {
        font-size: medium;
    }

    .articles-content-desc {
        font-size: small;
    }

    /* Full Width Buttons */
    .btn-articles {
        width: 90%;
        font-size: medium;
        padding: 12px;
    }

    /* Adjust News Title */
    .news-title {
        font-size: 1.8rem;
        max-width: 95%;
    }

    .news-meta {
        font-size: 0.85rem;
    }

    .category-badge {
        font-size: 12px;
        padding: 4px 10px;
    }

    .news-publish-info {
        gap: 5px;
    }

    /* Adjust Image */
    .news-image img {
        width: 100%;
        height: auto;
        margin: 30px 35px 0;
    }

    .news-image-section {
        min-height: 35vh;
        background-size: cover;
    }

    /* Single Column for Related Articles */
    .related-articles-list {
        display: grid;
        grid-template-columns: 1fr;
    }

    .related-article-image {
        height: 200px;
    }

    /* Adjust Readability */
    .related-article-title {
        font-size: 14px;
    }

    .related-article-intro,
    .read-more-text {
        font-size: 12px;
    }
}

/* Tablet Mode (Max 1024px) */
@media (max-width: 1024px) {
    .related-article {
        width: calc(50% - 20px); /* 2 articles per row */
    }
}

/* Mobile (Max 600px) */
@media (max-width: 600px) {
    .related-article {
        width: 90%;
        max-width: 500px;
    }
}