@media (min-width: 692px) {
  :root {
    --hex-columns: 5;
    --hex-width: 25.5%;
    --hex-gap: 3%;
    --hex-shift: calc(var(--hex-width) / 1);
  }
}

@media (max-width: 691px) {
  :root {
    --hex-columns: 2;
    --hex-width: 54%;
    --hex-gap: 3%;
    --hex-shift: calc(var(--hex-width) / 2 - var(--hex-gap) / 2);
  }
}
.container {
  padding: 20px;
}

.honeycomb {
  display: grid;
  grid-template-columns: repeat(var(--hex-columns), var(--hex-width));
  grid-auto-rows: calc(var(--hex-width) * 1.5);
  grid-gap: 0 var(--hex-gap);
  padding-right: var(--hex-shift);
}

.hex-btn {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin: 0;
  position: relative;
  -webkit-transition: all 0.2s 0s ease;
  -moz-transition: all 0.2s 0s ease;
  -o-transition: all 0.2s 0s ease;
  transition: all 0.2s 0s ease;
}
.hex-btn span {
  margin: auto;
  position: absolute;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  pointer-events: none;
}
.hex-btn:hover {
  transform: scale(1.1);
}
.hex-btn svg path {
  stroke: #ffffff;
  stroke-width:10px;
}

@media (min-width: 800px) {
  .hex-btn span {
    font-size: 23px;
  }
}
@media (max-width: 500px) {
  .hex-btn span {
    font-size: 15px;
  }
}


@media (min-width: 692px) {
  .hex-btn:nth-child(6),
  .hex-btn:nth-child(7),
  .hex-btn:nth-child(8),
  .hex-btn:nth-child(9),
  .hex-btn:nth-child(10) {
/*     transform: translateX(58.3%); */
    left: 58.3%;
  }
}

@media (max-width: 691px) {
  .hex-btn:nth-child(3),
  .hex-btn:nth-child(4) {
/*     transform: translateX(55.6%); */
    left: 55.6%;
  }
  .hex-btn:nth-child(5),
  .hex-btn:nth-child(6), {
/*     transform: translateX(55.6%); */
    left: 5.6%;
  } 
  .hex-btn:nth-child(7),
  .hex-btn:nth-child(8) {
/*     transform: translateX(55.6%); */
    left: 55.6%;
  }
  .hex-btn:nth-child(9),
  .hex-btn:nth-child(10) {
/*     transform: translateX(55.6%); */
    left: 5.6%;
  }
  .honeycomb {
    grid-auto-rows: calc(var(--hex-width) * 0.23);
    grid-gap: 0 var(--hex-gap);
  }
}

/* HOVER COLORS */
.hex-btn:hover .hex-bg-blue {
  fill: #1c9fe5;
}
.hex-btn:hover .hex-bg-green {
  fill: #7dc85f;
}
.hex-btn:hover .hex-bg-orange {
  fill: #f8a344;
}
.hex-btn:hover .hex-bg-purple {
  fill: #7669af;
}
.hex-btn:hover .hex-bg-darkblue {
  fill: #00638F;
}

.hex-bg-blue,
.hex-bg-green,
.hex-bg-orange,
.hex-bg-purple,
.hex-bg-darkblue {
  -webkit-transition: all 0.2s 0s ease;
  -moz-transition: all 0.2s 0s ease;
  -o-transition: all 0.2s 0s ease;
  transition: all 0.2s 0s ease;
}