/* code largely stolen from https://css-tricks.com/hexagons-and-beyond-flexible-responsive-grid-patterns-sans-media-queries */

.hexgrid-main {
  display: flex;
  --s: 20vw;   /* size  */
  --m: 0.25vw; /* margin */
  --f: calc(1.732 * var(--s) + 4 * var(--m)  - 1px);
}

.hexgrid {
  font-size: 0;
}

.hexgrid::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));
}

.hexgrid-container {
  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%);
  overflow: hidden;
  background: #ea9d3e;
  margin-bottom: calc(var(--m) - var(--s)*0.2885);
}

.hexgrid-content {
  display: flex;
  width: var(--s);
  margin: var(--m);
  height: calc(var(--s)*1.1547); 
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  font-size: 1vw;
}
.hexgrid-content img {
  width: calc(0.45*var(--s));
  height: calc(0.45*var(--s));
}
.hexgrid a {
  text-decoration: none;
  color: initial;
}