.grid220-img1 { grid-area: ga1; }
.grid220-img2 { grid-area: ga2; }
.grid220-img3 { grid-area: ga3; }
.grid220-img4 { grid-area: ga4; }
.grid220-img5 { grid-area: ga5; }
.grid220-img6 { grid-area: ga6; }
.grid220-img7 { grid-area: ga7; }
.grid220-img8 { grid-area: ga8; }
.grid220-img9 { grid-area: ga9; }
.grid220-img10 { grid-area: ga10; }
.grid220-img11 { grid-area: ga11; }
.grid220-img12 { grid-area: ga12; }
.grid220 {
  display: grid;
  height: 40vh;
  max-width: 90%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 5px;
  align-items: center;
  grid-template-areas: "ga1 ga2 ga3 ga4" "ga5 ga6 ga7 ga8" "ga9 ga10 ga11 ga12"; }
.grid-img img { }