section div {
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 3em;
  border: 10px solid white;
}

section {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

@media screen and (max-width: 760px) {
  section {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, 1fr);
  }
  .item-1,
  .item-6 {
    display: none;
  }

  .item-9 {
    grid-area: 1/1/2/2;
  }

  .item-3 {
    grid-area: 4/1/5/3;
  }
}

.item-1 {
  background: #b03532;
}
.item-2 {
  background: #33a8a5;
}
.item-3 {
  background: #30997a;
}
.item-4 {
  background: #6a478f;
}
.item-5 {
  background: #da6f2b;
}
.item-6 {
  background: #3d8bb1;
}
.item-7 {
  background: #e03f3f;
}
.item-8 {
  background: #59a627;
}
.item-9 {
  background: #4464a1;
}