@media (max-width: 1400px) {
    .container {
        max-width: 1120px;
    }

    .popular-card-image,
    .feed-card-image {
        height: 195px;
    }
}

@media (max-width: 1200px) {
    .container {
        max-width: 1040px;
    }

    .popular-card-title,
    .feed-card-title {
        font-size: 1.08rem;
    }

    .featured-municipalities-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .popular-grid,
    .latest-feed-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .middle-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .portal-header-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 0;
    }

    .portal-nav,
    .portal-actions {
        flex-wrap: wrap;
    }

    .portal-nav-dropdown {
        width: 100%;
        padding-bottom: 0;
    }

    .portal-nav-dropdown-toggle {
        width: 100%;
        text-align: left;
    }

    .portal-nav-dropdown-menu {
        position: static;
        display: block;
        min-width: 100%;
        margin-top: 10px;
    }

    .search-grid {
        grid-template-columns: 1fr;
    }

    .hero-stats {
        gap: 18px;
    }

    .hero-stat-item {
        justify-content: center;
    }

    .section-ribbon {
        padding: 11px 20px;
        font-size: 1rem;
        text-align: center;
    }

    .featured-municipalities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .popular-grid,
    .latest-feed-grid,
    .featured-municipalities-grid {
        grid-template-columns: 1fr;
    }

    .portal-logo a {
        font-size: 1.45rem;
    }

    .portal-nav {
        gap: 14px;
    }

    .hero-strip {
        padding: 16px 0 20px;
    }

    .hero-stat-text strong {
        font-size: 1rem;
    }

    .popular-card-title,
    .feed-card-title {
        font-size: 1.05rem;
    }

    .latest-header h2 {
        font-size: 1.35rem;
    }

    .ad-placeholder {
        min-height: 180px;
        font-size: 1.35rem;
    }

    .cta-box p {
        font-size: 0.95rem;
    }

    .portal-page-title {
        font-size: 1.8rem;
    }

    .post-view-title {
        font-size: 1.9rem;
    }

    .portal-form-card,
    .post-view-card,
    .portal-auth-card {
        padding: 18px;
    }

    .post-actions-bar {
        flex-direction: column;
    }

    .action-btn,
    .comment-submit-btn {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .featured-municipalities-box {
        padding: 16px;
    }

    .search-bar-box {
        padding: 16px;
    }

    .popular-card,
    .feed-card {
        padding: 12px;
    }

    .feed-card-body {
        padding: 12px;
    }
}