.container {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "Header Header Nav Nav Nav"
    "Section1 Section1 Section1 Aside Aside"
    "Section2 Section2 Section2 Aside Aside"
    "Section3 Section3 Section3 Aside Aside"
    "Footer Footer Footer Footer Footer"; 
   width: 100vw;
   height: 100vh;

  }
  @media screen and (max-width: 600px) {
    .container {
      font-size: 1rem;
      display: grid; 
      border-style: solid;
      border-color: black;
      grid-template-columns: 1fr 1fr ;
      grid-template-areas: 
                "Header Header "
                "Nav Nav "
                "Section1 Section1"
                "Section2 Section2"
                "Section3 Section3"
                "Aside Aside "
                "Footer Footer ";
      width: 100vw;
      height: 100vh;
    }
  }



header { 
  background:red; 
  grid-area: Header;
}
nav { 
  background:rgb(216, 80, 136); 
  grid-area: Nav;
}
.section1 { 
  background:blue; 
  grid-area: Section1;
} 
.section2 { 
  background:blue; 
  grid-area: Section2;
} 
.section3 { 
  background:blue; 
  grid-area: Section3;
} 

aside { 
  background:yellow; 
  grid-area: Aside;
}
footer { 
  background:green; 
  grid-area: Footer;
}