问为什么css网格模板区域不考虑我的媒体查询？

EN

". title title ."
". img-1-title img-2-title ."
". img-1 img-2 ."
". img-3-title img-4-title ."
". img-3 img-4 ."

"img-1 title title img-2"
"img-3 img-1-title img-2-title img-4"
". img-3-title img-4-title ."

<section>
  <div class="grid">
    <div class="title">Here is a couple of side projects</div>
    <div class="img-1-title">A chat app build with socket.io and node.js</div>
    <div class="arrow-1"><i class="fas fa-arrow-down"></i></div>
    <div class="img-1"></div>
    <div class="img-2-title">A responsive mock template of a company build with html css and flexboxgrid</div>
    <div class="arrow-2"><i class="fas fa-arrow-down"></i></div>
    <div class="img-2"></div>
    <div class="img-3-title">Wikipedia search bar connected to the wikipedia API</div>
    <div class="arrow-3"><i class="fas fa-arrow-down"></i></div>
    <div class="img-3"></div>
    <div class="img-4-title">Vanilla js calculator</div>
    <div class="arrow-4"><i class="fas fa-arrow-down"></i></div>
    <div class="img-4"></div>
  </div>
</section>

       .grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: 
        "title"
        "img-1-title"
        "arrow-1"
        "img-1"
        "img-2-title"
        "arrow-2"
        "img-2"
        "img-3-title"
        "arrow-3"
        "img-3"
        "img-4-title"
        "arrow-4"
        "img-4";
        background: rgb(27, 27, 27);
    }

    .title {
        grid-area: title;
        padding: 20px 0;
        font-family: Verdana, Tahoma, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 900;
        color: white;
    }

    .img-1 {
        grid-area: img-1;
        background: url("../postimg/chat_app.png") center/cover;
        height: 300px;
    }

    .img-2 {
        grid-area: img-2;
        background: url("../postimg/Web_template.png") center/cover;
        height: 300px;
    }

    .img-3 {
        grid-area: img-3;
        background: url("../postimg/Wiki_viewer.png") center/cover;
        height: 300px;
    }

    .img-4 {
        grid-area: img-4;
        background: url("../postimg/js_calculator.png") center/cover;
        height: 300px;
    }

    .img-1-title {
        grid-area: img-1-title;
    }

    .img-2-title {
    grid-area: img-2-title;
    }

    .img-3-title {
        grid-area: img-3-title;
    }

    .img-4-title {
    grid-area: img-4-title;
    }

    .img-1-title, .img-2-title, .img-3-title, .img-4-title {
        display: flex;
        height: 80px;
        padding: 8px;
        justify-content: center;
        align-items: center;
        font-weight: 200;
        font-family: Verdana, Tahoma, sans-serif;
        font-style: italic;
        color: white;
        border-top: 3px solid rgb(15, 177, 15);
    }

    .arrow-1 {
        grid-area: arrow-1;
    }

    .arrow-2 {
        grid-area: arrow-2;
    }

    .arrow-3 {
        grid-area: arrow-3;
    }

    .arrow-4 {
        grid-area: arrow-4;
    }

    .arrow-1, .arrow-2, .arrow-3, .arrow-4 {
        display: flex;
        padding: 15px;
        height: 25px;
        justify-content: center;
        font-size: 20px;
    }

    .fas {
        color: white;
    }

    @media only screen and (min-width: 1000px) {
        .grid {
            grid-template-columns: 200px 1fr 1fr 200px;
            grid-template-areas: 
            ". title title ."
            ". img-1-title img-2-title ."
            ". img-1 img-2 ."
            ". img-3-title img-4-title ."
            ". img-3 img-4 .";
            background: rgb(27, 27, 27);
        }

        .title {
            grid-area: title;
        }

        .img-1 {
            grid-area: img-1;
        }

        .img-2 {
            grid-area: img-2;
        }

        .img-3 {
            grid-area: img-3;
        }

        .img-4 {
            grid-area: img-4;
        }

        .img-1-title {
            grid-area: img-1-title;
        }

        .img-2-title {
        grid-area: img-2-title;
        }

        .img-3-title {
            grid-area: img-3-title;
        }

        .img-4-title {
        grid-area: img-4-title;
        }

        div.arrow-1, div.arrow-2, div.arrow-3, div.arrow-4 {
            display: none;
        }
    }