.honeycomb-grid{--sqrt3:1.7320508075688772;--edge:8em;--border:3px;--gap:0.5em;--outerEdge:calc(var(--edge) + var(--border));--placeholderX:calc((var(--outerEdge) * var(--sqrt3) + var(--gap)) * 2);--placeholderY:calc(var(--outerEdge) * 3 + var(--gap) * var(--sqrt3));--centerShiftX:calc((var(--outerEdge) / 2 * var(--sqrt3) - var(--gap) / 2) / 2);--centerShiftY:calc((var(--outerEdge) - var(--gap) * var(--sqrt3)) / 4);--polygon:polygon(0% 25%,50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);--backgroundColor:transparent;--borderColor:transparent;display:flex;flex-wrap:wrap;justify-content:center;min-width:var(--placeholderX);padding:var(--centerShiftY) var(--centerShiftX)}.honeycomb-item{width:0;height:0;position:relative}.honeycomb-content{--width:calc(var(--outerEdge) * var(--sqrt3));min-width:var(--width);width:var(--width);height:calc(var(--outerEdge) * 2);--transform:translate(calc(0px - var(--centerShiftX)),calc(0px - var(--centerShiftY)));background-color:var(--backgroundColor);display:flex;justify-content:center;align-items:center;z-index:1}.honeycomb-background,.honeycomb-content{clip-path:var(--polygon);position:absolute}.honeycomb-background{width:calc(var(--edge) * var(--sqrt3));height:calc(var(--edge) * 2);inset:calc(var(--gap) / 2 + var(--border)) calc((var(--gap) / 2 + var(--border)) * var(--sqrt3) / 2);background-size:cover;background-position:50%}.honeycomb-inner{overflow:hidden;display:flex;align-items:center;justify-content:center;width:calc(var(--edge) * var(--sqrt3));position:relative;z-index:2;height:100%}.honeycomb-content:after,.honeycomb-content:before,.honeycomb-inner{content:"";position:absolute;height:var(--outerEdge);width:calc(var(--edge) * var(--sqrt3));border-width:0 var(--border);border-style:solid;border-color:var(--borderColor)}.honeycomb-content:before{transform:rotate(60deg);z-index:-1}.honeycomb-content:after{transform:rotate(120deg);z-index:-1}.honeycomb-item:nth-child(4n+1){width:var(--placeholderX);height:var(--placeholderY)}.honeycomb-item:nth-child(4n+1) .honeycomb-content{transform:var(--transform)}.honeycomb-item:nth-child(4n+2) .honeycomb-content{transform:translate(calc(0px - var(--placeholderX) / 2)) var(--transform)}.honeycomb-item:nth-child(4n+3) .honeycomb-content{transform:translate(calc(0px - var(--placeholderX) / 4 * 3),calc(var(--placeholderY) / 2)) var(--transform)}.honeycomb-item:nth-child(4n+4) .honeycomb-content{transform:translate(calc(0px - var(--placeholderX) / 4),calc(var(--placeholderY) / 2)) var(--transform)}@media (max-width:768px){.honeycomb-grid{--edge:5em;--gap:0.3em;--border:2px}}@media (max-width:414px){.honeycomb-grid{--edge:3.2em;--gap:0.4em;--border:1px;padding:1.5rem .5rem}.honeycomb-item:nth-child(4n+2) .honeycomb-content{transform:translate(calc(0px - var(--placeholderX) / 2.1)) var(--transform)}.honeycomb-item:nth-child(4n+3) .honeycomb-content{transform:translate(calc(0px - var(--placeholderX) / 4 * 2.6),calc(var(--placeholderY) / 2.1)) var(--transform)}.honeycomb-item:nth-child(4n+4) .honeycomb-content{transform:translate(calc(0px - var(--placeholderX) / 4.5),calc(var(--placeholderY) / 2.1)) var(--transform)}}@media (max-width:360px){.honeycomb-grid{--edge:2.8em;--gap:0.3em;padding:1rem .3rem}}