@media (min-width: 800px) and (max-width: 1250px) {
    /* 1. FLUID HEADER GRID */
    .header-grid {
        height: clamp(80px, 10vw, 100px); /* Height shrinks as screen narrows */
        grid-template-columns: 1fr 2fr 1fr; /* Middle column gets more room for title */
        gap: 15px;
        padding: 0 20px;
        transition: all 0.3s ease;
    }

    /* 2. RESPONSIVE LOGO */
    .logo img {
        height: clamp(50px, 7vw, 70px); /* Scales between 50px and 70px */
        width: clamp(50px, 7vw, 70px);
        flex: none; /* Removes the flex conflict from original code */
    }

    /* 3. SCALING TITLE */
    .title-logo {
        font-size: clamp(28px, 5vw, 45px); /* Smoothly shrinks from 45px to 28px */
        white-space: nowrap;
        justify-self: center;
    }

    /* 4. FLUID SEARCH CONTAINER */
    .search-container {
        width: auto;
        max-width: 100%;
        justify-self: end; /* Keeps it aligned to the right column */
    }

    .search-box {
        /* On tablet, we want the search box visible but compact */
        width: clamp(80px, 12vw, 150px) !important; 
        padding: 8px 12px;
        opacity: 1;
        font-size: 12px;
    }

    /* 5. NAVIGATION LIST (Optional Tablet Tweak) */
    /* If you have a nav-list inside the grid, reduce gap so it doesn't wrap */
    .nav-list, .nav-list-1 {
        gap: clamp(10px, 2vw, 25px);
    }

    .nav-item, .nav-community {
        font-size: 14px;
    }

    .livescore-container {
        min-height: calc(100vh - 150px); /* Adjust based on header + footer */
        display: block;
        margin-top: 40px;
        padding:0;
    }
}

@media (min-width: 851px) and (max-width: 1000px) {
    /* 7. THE FEED CONTAINER: Fluid width fix */
    .feed-container {
        padding: 1rem;
        width: 100%;       /* Use 100% width, not 100vh */
        max-width: 100%;
        margin: 0;         /* Centered with no forced side margins */
        overflow-y: visible;
        box-sizing: border-box;
    }

    /* 8. ELFSIGHT / FEED GRID: 2-column layout for tablets */
    .feed, .feed5 {
        display: grid;
        /* Change to 2 columns so the Elfsight widget has room to breathe */
        grid-template-columns: repeat(1, 1fr);
        max-width: 100%;
        overflow-x: visible;
        gap: 25px;
        width: 100%;
        margin: 0 auto;

        .title {
            font-size: 14px; /* Slightly larger for tablet readability */
            text-align: center;
            padding: 10px 0;
        }
    }

    /* Specific fix for Elfsight scaling */
    .elfsight-app-wrapper, 
    [class*="elfsight-app"] {
        width: 100% !important;
        transform: scale(1); /* Ensure no scaling conflicts are shrinking the content */
    }
}

@media (min-width:1000px) {
    /* 6. HAMBURGER RESET */
    .hamburger {
        position: static; /* Overrides the 'fixed' in your original code */
        display: none;
        justify-self: end;
    }
}

@media (min-width:601px) and (max-width:800px) {
    .community-container {
        padding-top: 20px;
        width: 100%;
        min-height: 100vh;
        justify-content: center;
        align-items: center;
        color: white;
        background: linear-gradient(300deg, rgb(26, 37, 71),  rgb(31, 31, 31)), rgb(51, 255, 0);
        overflow-y: visible;
    }

    .welcome-sign {
        display: flex;
        flex-direction:column;
        width: 100%;

        img {
            width: 20rem;
            justify-content: center;
            align-items: center;
        }

        h1 {
            font-size: 2rem;
            color: white;
        }

        .fanzone {
            color: #72ff00;
            font-size: 50px;
        }

        p {
            font-size: 1rem;
        }
    }
}