style.css

html,
body {
  font-size: 16px;
  color: hsl(60, 58%, 0%);
}
body {
  padding: 20px;
  background-color: rgb(99, 232, 203);
}
h1 {
  font-size: 2rem;
  text-align: center;
}
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 40px 0;
}
button {
  padding: 10px;
  border-radius: 5px;
  border: 2px solid hsl(60, 58%, 17%);
  background-color: navajowhite;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  grid-auto-rows: 10rem;
  grid-gap: 20px;
  margin: 40px 0;
}
.grid__item {
  background-color: hsl(40, 58%, 17%);
  border-radius: 5px;
}
.grid__item:nth-child(1),
.grid__item:nth-child(4) {
  background-color: hsl(10, 58%, 17%);
}
.grid__item:nth-child(2),
.grid__item:nth-child(6) {
  background-color: hsl(150, 58%, 17%);
}
.grid__item:nth-child(3),
.grid__item:nth-child(7) {
  background-color: hsl(200, 58%, 17%);
}
.grid__item:nth-child(4),
.grid__item:nth-child(8) {
  background-color: hsl(305, 58%, 17%);
}

/* transition styles that would be animated */
.toggle-column {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.toggle-row {
  grid-auto-rows: 16rem;
}
.toggle-gap {
  grid-gap: 40px;
}