.flex4-2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 12px;
}
.flex:nth-child(1) {
  grid-area: 1 / 1 / 2 / 2;
}
.flex:nth-child(2) {
  grid-area: 1 / 2 / 2 / 3;
}
.flex:nth-child(3) {
  grid-area: 1 / 3 / 2 / 4;
}
.flex:nth-child(4) {
  grid-area: 1 / 4 / 2 / 5;
}
.flex:nth-child(5) {
  grid-area: 2 / 1 / 3 / 2;
}
.flex:nth-child(6) {
  grid-area: 2 / 2 / 3 / 3;
}
.flex:nth-child(7) {
  grid-area: 2 / 3 / 3 / 4;
}
.flex:nth-child(8) {
  grid-area: 2 / 4 / 3 / 5;
}
@media screen and (max-width: 767px) {
  .flex4-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
  }
  .flex:nth-child(1) {
    grid-area: 1 / 1 / 2 / 2;
  }
  .flex:nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
  }
  .flex:nth-child(3) {
    grid-area: 2 / 2 / 3 / 3;
  }
  .flex:nth-child(4) {
    grid-area: 2 / 1 / 3 / 2;
  }
  .flex:nth-child(5) {
    grid-area: 3 / 1 / 4 / 2;
  }
  .flex:nth-child(6) {
    grid-area: 3 / 2 / 4 / 3;
  }
  .flex:nth-child(7) {
    grid-area: 4 / 1 / 5 / 2;
  }
  .flex:nth-child(8) {
    grid-area: 4 / 2 / 5 / 3;
  }
}
.flex4-1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 12px;
}
.flex:nth-child(1) {
  grid-area: 1 / 1 / 2 / 2;
}
.flex:nth-child(2) {
  grid-area: 1 / 2 / 2 / 3;
}
.flex:nth-child(3) {
  grid-area: 1 / 3 / 2 / 4;
}
.flex:nth-child(4) {
  grid-area: 1 / 4 / 2 / 5;
}
.flex:nth-child(5) {
  grid-area: 2 / 1 / 3 / 2;
}
.flex:nth-child(6) {
  grid-area: 2 / 2 / 3 / 3;
}
.flex:nth-child(7) {
  grid-area: 2 / 3 / 3 / 4;
}
.flex:nth-child(8) {
  grid-area: 2 / 4 / 3 / 5;
}
@media screen and (max-width: 767px) {
  .flex4-1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    gap: 12px;
  }
  .flex:nth-child(1) {
    grid-area: 1 / 1 / 2 / 2;
  }
  .flex:nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
  }
  .flex:nth-child(3) {
    grid-area: 2 / 2 / 3 / 3;
  }
  .flex:nth-child(4) {
    grid-area: 2 / 1 / 3 / 2;
  }
  .flex:nth-child(5) {
    grid-area: 3 / 1 / 4 / 2;
  }
  .flex:nth-child(6) {
    grid-area: 3 / 2 / 4 / 3;
  }
  .flex:nth-child(7) {
    grid-area: 4 / 1 / 5 / 2;
  }
  .flex:nth-child(8) {
    grid-area: 4 / 2 / 5 / 3;
  }
}