.container {
  --s: 140px;  /* size  */

  --g: calc(12px + var(--s)/2);
  display: flex;
  gap: 4px var(--g);
  flex-wrap: wrap;
  padding-bottom: calc(var(--s)*cos(30deg)/2);
  container-type: inline-size;
}
.container > * {
  width: var(--s);
  aspect-ratio: 1/cos(30deg);
  border-radius: 25% / 50%;
  corner-shape: bevel;
  margin-bottom: calc(var(--s)*cos(30deg)/-2);
  --_n: round(down,(100cqw + var(--g))/(var(--s) + var(--g)));
  --_m: round(down,(100cqw - (var(--s) - var(--g))/2)/(var(--s) + var(--g)));
  --_c: round(down,1 - mod((sibling-index() - 1 + var(--_m))/(var(--_n) + var(--_m)),1));
  margin-left: calc(var(--_c)*(var(--s) + var(--g))/2);
}





body {
  background: #f3f3f3;
  color: #45ADA8;
}
.container {
  counter-reset: num;
}
.container div {
  display: grid;
  place-content: center;
  counter-increment: num;
  border: 10px solid ;
  box-sizing: border-box;
  font: bold 28px system-ui,sans-serif;
}
.container div:before {
  content: counter(num);
}
.container div:nth-child(odd) {
  color: #e92d00;
}