body {
  display: flex;
  background-image: url(https://file.garden/ZFj9tPVXdRSd8e0M/environment2darker.png);
  background-size: cover;
  background-attachment: fixed;
  max-width: 950px;
  align-content: center;
  margin: auto;
  margin-top: 30px;
}

.hexgrid {
  --margin: 4px;
  --size: 180px;
  --two-rows: calc(1.5 * var(--size) + 4 * var(--margin));
  display: block;
  font-size: 0;
}

.hexgrid::before {
  content: "";
  shape-outside: repeating-linear-gradient(
    #0000 0 calc(var(--two-rows) - 4px),
    #000 0 var(--two-rows)
  );
  height: 120%;
  width: calc(var(--size) / 2 + var(--margin));
  float: left;
}

.hexgrid .item {
  background: rgb(120, 120, 120);
  width: var(--size);
  height: calc(var(--size) * 1.15);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: inline-block;
  margin-bottom: calc(var(--margin) - var(--size) * 0.27);
  margin-left: calc(var(--margin) * 2);
}

img {
  position: absolute;
}