Stacking clip-path hexagon shapes with CSS like a bee hive?

Question

after trying out clip-path property I finally got my hexagon shape working, now I want to have hexagons "stack" into each other like kind of a beehive, I know I could do this with absolute positioning but this seems le not the best approach tbh.

I want something similar to this: https://i.stack.imgur.com/BlozR.jpg

HTML

<div class="poligon"></div>
<div class="poligon"></div>

CSS:

.poligon {
  display: inline-block;
  position: absolute; top:50px; right:50px;
  width: 300px;
  height: 300px;
  background: red;
  box-sizing: border-box;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}