* {
  margin: 0;
  padding: 0;
  background-color: rgb(0, 0, 0);
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  text-align: center;
}

.grid-container {
  display: grid;
  grid-template-columns: 3fr 3fr; 
  grid-template-rows: auto 3fr auto; 
  grid-template-areas: 
    "header header header "
    "nav nav nav"
    "section aside aside"
    "article aside aside"
    "footer footer footer";
  gap: 5px;
  height: 30rem; 
  background-color: black;
  padding: 1rem;
}

 .header {
  grid-area: header;
  background-color: rgb(36, 68, 211);
  height: 12rem;
}
 
.nav {
  grid-area: nav;
  background-color: rgb(52, 206, 172);
  text-align: center;
  height: 12rem;
}

.section {
  grid-area: section;
  background-color: rgb(240, 217, 14);
  text-align: center;
  padding: 5rem;
  width: 80rem;
}

.article {
  grid-area: article;
  background-color: rgb(216, 88, 29);
  text-align: center;
  padding: 5rem;
}

.aside {
  grid-area: aside;
  background-color: rgb(255, 255, 255);
  text-align: center;
  padding: 20px;
  width: 25rem;
  height: 45rem;
}

.footer {
  grid-area: footer;
  background-color: rgb(36, 68, 211);
  text-align: center;
  padding: 5rem;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-areas: 
      "header"
      "nav"
      "section"
      "article"
      "aside"
      "footer";
  }
}