Media query is not working with css grid layout

Question

Here is my HTML & CSS file

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-areas:
    "header"
    "section"
    "aside-1"
    "aside-2"
    "footer";
}

@media screen and (min-width: 700px) {
    .container {
        grid-template-areas:
      "header header header"
      "aside-1 section aside-2"
      "footer footer footer";
    }
}

/* All Grid Items */
.container > * {
    background-color: mediumseagreen;
    font-size: 80px;
}

header {
    grid-area: header;
}

aside:nth-of-type(1) {
    grid-area: aside-1;
}

section {
    grid-area: section;
}

aside:nth-of-type(2) {
    grid-area: aside-2;
}

footer {
    grid-area: footer;
}

<div class="container">
    <header>Header</header>
    <aside>Aside 1</aside>
    <section>Section</section>
    <aside>Aside 2</aside>
    <footer>Footer</footer>
</div>

It will be two different layouts based on the media query applied on screen size 700px. However, it is only showing a single layout of all the different screen sizes.

grid-template-areas:
  "header header header"
  "aside-1 section aside-2"
  "footer footer footer"

The other layout is working below 700px, if I inspect the console, it shows for the all sizes of the screen:

grid-template-areas: "header" "section" "aside-1" "aside-2" "footer";

Answer 1

The code is fine and working properly with create-react-app, maybe hot re-loading is a solution.