.hex-grid {
  /* display:flex; */
  --s: 250px;  /* size  */
  --m: 4px;    /* margin */
  --f: calc(var(--s) * 1.732 + 4 * var(--m) - 1px); 
  overflow: visible;

  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: 50px;
  padding-right: 50px;
  width: fit-content;

  display: grid;
  grid-template-columns: repeat(auto-fit, calc(var(--s) + 2*var(--mh)));
  justify-content:end;
  

}

.hex-grid-container {
    grid-column: 1/-1;
  overflow: visible;
  font-size: 0; /* disable white space between inline block element */
}

.hex-grid-container div {
  background-color: white;
  width: var(--s);
  margin: var(--m);
  height: calc(var(--s) * 1.1547);
  display: inline-block;
  font-size:initial;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
  margin-bottom: calc(var(--m) - var(--s) * 0.2885);
}

.hex-grid-container::before {
  content: "";
  width: calc(var(--s) / 2 + var(--m));
  float: left;
  height: 120%; 
  shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px), #000 0 var(--f));
}

.hex img{
  margin: var(--m);
  height: calc(var(--s) * 1.1547);
  margin: 0;
  object-fit:contain;
  display: block;
}