body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
  margin: 0;
}
.grid {
  display: grid;
}
.cell {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cell-1 {
  background-color: #95C6AE;
  margin: 4px 4px 2px 4px;
}
.cell-2 {
  background-color: #77B697;
}
.cell-3 {
  background-color: #59A681;
}
.cell-4 {
  background-color: #458063;
}
.cell-5 {
  background-color: #396A52;
}
.cell-6 {
  background-color: #294C3B;
}
.cell-7 {
  background-color: #192E24;
  margin: 2px 4px 4px 4px;
}

/* Only works when screen is 769px wide or larger (Tablet & Desktop Screens) */
@media screen and (min-width: 769px) {
  .grid {
    grid-template-columns: 22.5% 22.5% 20% 35%;
    grid-template-rows: 8vh 8vh 38vh 38vh 8vh;
  }

  .cell-1 {
    grid-column: 1 / 5;
  }
  .cell-2 {
    grid-column: 1 / 5;
    margin: 2px 4px 2px 4px;
  }
  .cell-3 {
    grid-column: 1 / 3;
    grid-row: 3 / 5;
    margin: 2px 2px 2px 4px;
  }
  .cell-4 {
    margin: 2px;
  }
  .cell-5 {
    margin: 2px;
  }
  .cell-6 {
    grid-row: 3 / 5;
    grid-column: 4 / 5;
    margin: 2px 4px 2px 2px;
  }
  .cell-7 {
    grid-column: 1 / 5;
  }
}

/* Only works when screen is 768px wide or smaller (Mobile Screens) */
@media screen and (max-width: 768px) {
  .grid {
    grid-template-rows: 10vh 10vh 40vh 10vh 10vh 10vh 10vh;
  }

  .cell-2 {
    margin: 2px 4px 2px 4px;
  }
  .cell-3 {
    margin: 2px 4px 2px 4px;
  }
  .cell-4 {
    margin: 2px 4px 2px 4px;
  }
  .cell-5 {
    margin: 2px 4px 2px 4px;
  }
  .cell-6 {
    margin: 2px 4px 2px 4px;
  }
}