body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
}
.grid {
display: grid;
height: 100vh;

grid-template-rows: 0.04fr 0.04fr 0.5fr 0.5fr 0.05fr;
/*Default Desktop Display*/
grid-template-areas:
"hd hd hd hd"
"nv nv nv nv"
"he he a sb"
"he he b sb"
"ft ft ft ft"
;

}
.cell {
  color: white;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;

}
.cell-1 {
  background-color: #C52060;
  grid-area: hd;

}
.cell-2 {
  background-color: #A01D76;
  grid-area: nv;
}
.cell-3 {
  background-color: #651D76;
  grid-area: he;
}
.cell-4 {
  background-color: #501D76;
  grid-area: a;
}
.cell-5 {
  background-color: #2E1D76;
  grid-area: b;
}
.cell-6 {
  background-color: #150f44;
  grid-area: sb;
}

.cell-7 {
  background-color: #0a0a30;
  grid-area: ft;
}


@media screen and (max-width: 900px) {
  .grid {
      /*Default Desktop Display*/
      grid-template-rows: none;
      grid-template-areas:
      "hd"
      "nv"
      "he"
      "he"
      "a"
      "b"
      "sb"
      "ft"
      ;

  }
}