:root {
  --marge: 1rem;
  --bullet-size: 2rem;
  --color-first: yellow;
}

.parent img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.parent {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 10rem);
  gap: var(--marge);
  padding: var(--marge);
}

.box1, .box3 {
  grid-row: 1/2;
}
.box2, .box4 {
  grid-row: 1/3;
}
.box5, .box7 {
  grid-row: 2/4;
}

.parent .box {
  counter-increment: step;
  position: relative;
}
.parent .box::after {
  display: grid;
  justify-content: center;
  align-content: center;
  background: var(--color-first);
  width: var(--bullet-size);
  height: var(--bullet-size);
  border-radius: 2rem;
  /*content: counter(step) "";*/
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: 1rem;
}

@media(max-width: 767px){
.parent{display:block;}
.parent img{margin-bottom:20px;}
}