* {
  margin: 0;
  padding: 0;
}

.hex-grid {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  list-style-type: none;
}

.hex {
  position: relative;
  visibility: hidden;
  outline: 1px solid transparent;
  /* fix for jagged edges in FF on hover transition */
}

.hex::after {
  content: '';
  display: block;
  padding-bottom: 86.602%;
  /* =  100 / tan(60) * 1.5 */
}

.hex-content {
  position: absolute;
  width: 96%;
  padding-bottom: 110.851%;
  /* =  width / sin(60) */
  margin: 0 2%;
  overflow: hidden;
  visibility: hidden;
  outline: 1px solid transparent;
  /* fix for jagged edges in FF on hover transition */
  -webkit-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
  -ms-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
  transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}

.hex-content * {
  position: absolute;
  visibility: visible;
  outline: 1px solid transparent;
  /* fix for jagged edges in FF on hover transition */
}

.hex-link {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background-color: #212a38;
  
  -webkit-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
  -ms-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
  transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
  
  -webkit-transition: background-color 0.5s ease-out;
  -moz-transition: background-color 0.5s ease-out;
  -o-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}
.hex:hover .hex-link {
  background-color: rgba(94, 220, 212, 0.75);
}

/* HEX CONTENT */ 
.hex img {
  left: -100%;
  right: -100%;
  margin: 0 auto;
  top: 50%;
 
  -webkit-transform: rotate3d(0, 0, 0, 0deg) translateY(-50%);
  -ms-transform: rotate3d(0, 0, 0, 0deg) translateY(-50%);
  transform: rotate3d(0, 0, 0, 0deg) translateY(-50%);
  
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}
.hex:hover img {
  filter: none;
  -webkit-filter: none;
}

/* HEXAGON SIZING AND EVEN ROW INDENTATION */ 
@media (min-width:1201px) {
  /* <- 5-4  hexagons per row */
  .hex-grid {
    padding-bottom: 4.4%
  }
  .hex {
    width: 20%;
    /* = 100 / 5 */
  }
  .hex:nth-child(9n+6) {
    /* first hexagon of even rows */
    margin-left: 10%;
    /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 1200px) and (min-width:901px) {
  /* <- 4-3  hexagons per row */
  .hex-grid {
    padding-bottom: 5.5%
  }
  .hex {
    width: 25%;
    /* = 100 / 4 */
  }
  .hex:nth-child(7n+5) {
    /* first hexagon of even rows */
    margin-left: 12.5%;
    /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 900px) and (min-width:601px) {
  /* <- 3-2  hexagons per row */
  .hex-grid {
    padding-bottom: 7.4%
  }
  .hex {
    width: 33.333%;
    /* = 100 / 3 */
  }
  .hex:nth-child(5n+4) {
    /* first hexagon of even rows */
    margin-left: 16.666%;
    /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 600px) {
  /* <- 2-1  hexagons per row */
  .hex-grid {
    padding-bottom: 11.2%
  }
  .hex {
    width: 50%;
    /* = 100 / 3 */
  }
  .hex:nth-child(3n+3) {
    /* first hexagon of even rows */
    margin-left: 25%;
    /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 400px) {
  .hex-grid {
    font-size: 13px;
  }
}