.item1 {
  grid-area: sec1;
}
.item2 {
  grid-area: sec2;
}
.item3 {
  grid-area: sec3;
}
.item4 {
  grid-area: sec4;
}
.item5 {
  grid-area: sec5;
}
.item6 {
  grid-area: sec6;
}
.item7 {
  grid-area: sec7;
}
.item8 {
  grid-area: sec8;
}
.item9 {
  grid-area: sec9;
}
.item10 {
  grid-area: sec10;
}
.item11 {
  grid-area: sec11;
}
.item12 {
  grid-area: sec12;
}

.grid-container {
  display: grid;
  grid-template-areas:
    "sec1 sec1 sec2 sec2 sec3 sec3"
    "sec4 sec5 sec6 sec7 sec3 sec3"
    "sec8 sec8 sec9 sec10 sec3 sec3"
    "sec8 sec8 sec11 sec12 sec3 sec3";
  gap: 2px;
  background-color: #e5e5e5;
  padding: 2px;
  margin-left: auto;
  margin-right: auto;
}

.grid-container > div {
  background-color: #fff;
  text-align: center;
  padding: 20px 0;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 700px) {
  .grid-container {
    grid-template-areas:
      "sec3"
      "sec1"
      "sec2"
      "sec4"
      "sec5"
      "sec6"
      "sec7"
      "sec9"
      "sec10"
      "sec11"
      "sec12"
      "sec8";
  }

  div.grid-container {
    width: 304px !important;
  }
}