body {
  background: rgb(168, 168, 168);
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  width: 60vw;
  height: 80vw;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: blue;
  border-radius: 25%;

}

.item2 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: blue;
  border-radius: 25%;
}

.item3 {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: blue;
  border-radius: 25%;
}

.item4 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: blue;
  border-radius: 50%;
}

.item5 {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: blue;
  border-radius: 50%;
}

.item6 {
  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: blue;
  border-radius: 50%;
}

.item7 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 4;
  background-color: blue;
  border-top-left-radius: 50%;
}

.item7-1 {
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 3;
  grid-row-end: 4;
  background-color: blue;
}

.item7-2 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
  background-color: blue;
  border-bottom-left-radius: 50%;
}

.item8 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 4;
  grid-row-end: 5;
  background-color: blue;
}

.item8-1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 5;
  background-color: blue;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}

.item9 {
  grid-column-start: 5;
  grid-column-end: 7;
  grid-row-start: 4;
  grid-row-end: 5;
  background-color: blue;
}

.item9-1 {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 4;
  grid-row-end: 5;
  background-color: blue;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}

.item10 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 5;
  grid-row-end: 6;
  background-color: blue;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}

.item11 {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 5;
  grid-row-end: 6;
  background-color: blue;
  border-radius: 50%;
}

.item11-1 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 5;
  grid-row-end: 6;
  background-color: blue;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}

.item12 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 6;
  grid-row-end: 7;
  background-color: blue;
  border-radius: 50%;
}

.item13 {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 6;
  grid-row-end: 7;
  background-color: blue;
}

.item14 {
  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 6;
  grid-row-end: 7;
  background-color: rgb(255, 255, 255);
}

.item15 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 7;
  grid-row-end: 8;
  background-color: blue;
  border-radius: 50%;
}

.item16 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 7;
  grid-row-end: 8;
  background-color: blue;
}

.item17 {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 7;
  grid-row-end: 8;
   background-color: blue;
}