Проблемы с CSS Grid и Media Queries (HELP!) [Решено]

Question

мой самый последний медиазапрос "@media (max-width: 400px)" не отличается от второго медиазапроса "@media (min-width: 401px) и (max-width: 1024px)". Я хочу изменить число столбцов для #outer с 4 на 2 и количество столбцов для раздела #section с 2 на 1. Как заставить его работать, не затрагивая другие медиазапросы?

    @media (min-width: 1025px) {
        main {
            grid-template-columns: repeat(4, 1fr);
            grid-template-areas: 
            "header header header header"
            "article article article aside"
            "section section section aside"
            "footer footer footer footer"
            ;
        }

        aside #outer {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
        "item1 item2"
        "item3 item4"
        "item5 item6"
        ; 
        grid-gap: 15px 0px;
    }

    section #section {
        padding: 15px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
        "section1 section2"
        "section3 section4"
        ;
        grid-gap: 15px 15px;
    }
    }

    @media (min-width: 401px) and (max-width: 1024px) {
        aside #outer {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-areas: 
            "item1 item2 item3 item4"
            "item5 item6"
            ;
            grid-gap: 15px 15px;
            margin: 15px;
        ;
        }

        main {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: auto;
            grid-template-areas: 
            "header"
            "article"
            "section"
            "aside"
            "footer"
            ;
            grid-gap: 10px;
        }

        section #section {
        padding: 15px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
        "section1 section2"
        "section3 section4"
        ;
        grid-gap: 15px 15px;
    }

    }

    @media (max-width: 400px) {
        main {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            grid-template-areas: 
            "header"
            "article"
            "section"
            "aside"
            "footer"
            ;
            grid-gap: 10px;
        }

        section #section {
        padding: 15px;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
        "section1"
        "section2"
        "section3"
        "section4"
        ;
        grid-gap: 15px 15px;
        }

        aside #outer {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-areas: 
            "item1 item2"
            "item3 item4"
            "item5 item6"
            ;
            grid-gap: 15px 15px;
            margin: 15px;
        ;
        }

    }

Буду признателен за любые идеи:)

Answer 1

Нет ничего плохого в медиа-запросах. Это было просто размер окна не было достаточно маленьким. Это сработало, когда я переключился на мобильный вид.