body {
  margin: 0;
  font-family: Arial, sans-serif;
}
.grid-container {

  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "masthead"
    "nav"
    "hero"
    "card-a"
    "card-b"
    "sidebar"
    "footer";
}
.cell {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.masthead, .footer{
  background: #000000;
  color: white;
}
.nav {
  background: #413e39;
}
.hero, .card-a, .card-b, .sidebar {
  background: #b47f35;
}
.masthead {grid-area: masthead;  }
.nav {grid-area: nav;}
.hero {grid-area: hero;}
.card-a {grid-area: card-a;}
.card-b {grid-area: card-b;}
.sidebar {grid-area: sidebar;}
.footer {grid-area: footer;}

@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "masthead masthead masthead masthead"
      "nav nav nav nav"
      "hero hero card-a sidebar"
      "hero hero card-b sidebar"
      "footer footer footer footer";
  }
}