header {
  grid-area: header;
  background-image: url("img/paper.jpg");
  background-color: white;
  padding: 20px;
  border-style: solid;
  border-color: lightgrey;
}
article {
  grid-area: content;
  background-color: white;
  padding: 20px;
  border-style: solid;
  border-color: lightgrey;
}
aside {
  grid-area: sidebar;
  padding: 20px;
  background-color: white;
  border-style: solid;
  border-color: lightgrey;

}
footer {
  padding: 20px;
  grid-area: footer;
  background-color: white;
  border-style: solid;
  border-color: lightgrey;

}
.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: 
    "header  header"
    "sidebar content"
    "footer  footer";
}
@media (max-width: 500px) {
  .wrapper {
    grid-template-columns: 4fr;
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }
}