body {
  background: rgb(136, 136, 136);
}
.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: yellowgreen;
    border-radius: 50%;
    
  }
  .item2 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    background-color: yellowgreen;
    border-radius: 50%;
  }
  .item3 {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 2;
    background-color: yellowgreen;
    border-radius: 50%;
  }
  .item4 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    background-color: yellowgreen;
    border-radius: 50%;
  }
  .item5 {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
    background-color: yellowgreen;
    border-radius: 50%;
  }
  .item6 {
    grid-column-start: 6;
    grid-column-end: 7;
    grid-row-start: 2;
    grid-row-end: 3;
    background-color: yellowgreen;
    border-radius: 50%;
  }

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

  .item8 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
    background-color: yellowgreen;
  }
  .item8-1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 5;
    background-color: yellowgreen;
    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: yellowgreen;
  }
  .item9-1 {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 4;
    grid-row-end: 5;
    background-color: yellowgreen;
    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: yellowgreen;
    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: yellowgreen;
  }
  .item11-1 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 5;
    grid-row-end: 6;
    background-color: yellowgreen;
    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: yellowgreen;
  }

  .item13 {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 6;
    grid-row-end: 7;
    background-color: yellowgreen;
  }
  .item14 {
    grid-column-start: 6;
    grid-column-end: 7;
    grid-row-start: 6;
    grid-row-end: 7;
    background-color: yellowgreen;
  }
  .item15 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 7;
    grid-row-end: 8;
    background-color: yellowgreen;
  }
  .item16 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 7;
    grid-row-end: 8;
    background-color: yellowgreen;
  }
  .item17 {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 7;
    grid-row-end: 8;
    background-color: yellowgreen;
  }