#categories {
  overflow:hidden;
  width: 90%;
}

.clr:after {
  content: "";
  display: block;
  clear: both;
}

#categories li {
  position: relative;
  list-style-type: none;
  float: left;
  overflow: hidden;
  visibility: hidden;
  transform: rotate(-60deg) skewY(30deg);
}

#categories li * {
  position: absolute;
  visibility: visible;
}

#categories li>div {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: skewY(-30deg) rotate(60deg);
  backface-visibility: hidden;
}

/* HEX CONTENT */

#categories li img {
  cursor: pointer;
  left: -100%;
  right: -100%;
  /* width: auto; */
  height: 100%;
  margin: 0 auto;
  transition: all .5s;
}

#categories li img:hover {
  height: 150%;
}

@media (min-width:1201px) {
  #categories li {
    width: 19.2%;
    /* = (100-4) / 5 */
    padding-bottom: 22.17%;
    /* =  width /0.866 */
  }
  #categories li:nth-child(9n+6),
  #categories li:nth-child(9n+7),
  #categories li:nth-child(9n+8),
  #categories li:nth-child(9n+9) {
    margin-top: -4.2%;
    margin-bottom: -4.2%;
    transform: translateX(50%) rotate(-60deg) skewY(30deg);
  }
  #categories li:nth-child(9n+6):last-child,
  #categories li:nth-child(9n+7):last-child,
  #categories li:nth-child(9n+8):last-child,
  #categories li:nth-child(9n+9):last-child {
    margin-bottom: 0;
  }
  #categories li:nth-child(9n+6) {
    margin-left: 0.5%;
    clear: left;
  }
  #categories li:nth-child(9n+10) {
    clear: left;
  }
  #categories li:nth-child(9n+2),
  #categories li:nth-child(9n+ 7) {
    margin-left: 1%;
    margin-right: 1%;
  }
  #categories li:nth-child(9n+3),
  #categories li:nth-child(9n+4),
  #categories li:nth-child(9n+8) {
    margin-right: 1%;
  }
}

@media (max-width: 1200px) and (min-width:901px) {
  #categories li {
    width: 24.25%;
    /* = (100-3) / 4 */
    padding-bottom: 28.002%;
    /* =  width /0.866 */
  }
  #categories li:nth-child(7n+5),
  #categories li:nth-child(7n+6),
  #categories li:nth-child(7n+7) {
    margin-top: -6.1%;
    margin-bottom: -6.1%;
    transform: translateX(50%) rotate(-60deg) skewY(30deg);
  }
  #categories li:nth-child(7n+5):last-child,
  #categories li:nth-child(7n+6):last-child,
  #categories li:nth-child(7n+7):last-child {
    margin-bottom: 0;
  }
  #categories li:nth-child(7n+2),
  #categories li:nth-child(7n+6) {
    margin-left: 1%;
    margin-right: 1%;
  }
  #categories li:nth-child(7n+3) {
    margin-right: 1%;
  }
  #categories li:nth-child(7n+8) {
    clear: left;
  }
  #categories li:nth-child(7n+5) {
    clear: left;
    margin-left: 0.5%;
  }
}

@media (max-width: 900px) and (min-width:601px) {
  #categories li {
    width: 32.666%;
    /* = (100-2) / 3 */
    padding-bottom: 37.721%;
    /* =  width /0.866 */
  }
  #categories li:nth-child(5n+4),
  #categories li:nth-child(5n+5) {
    margin-top: -8.622%;
    margin-bottom: -8.622%;
    transform: translateX(50%) rotate(-60deg) skewY(30deg);
  }
  #categories li:nth-child(5n+4):last-child,
  #categories li:nth-child(5n+5):last-child {
    margin-bottom: 0;
  }
  #categories li:nth-child(5n+4) {
    margin-right: 1%;
    margin-left: 0.5%;
  }
  #categories li:nth-child(5n+2) {
    margin-left: 1%;
    margin-right: 1%;
  }
  #categories li:nth-child(5n+6) {
    clear: left;
  }
}

@media (max-width: 600px) {
  #categories li {
    width: 49.5%;
    /* = (100-1) / 2 */
    padding-bottom: 57.16%;
    /* =  width /0.866 */
  }
  #categories li:nth-child(3n+3) {
    margin-top: -13.392%;
    margin-bottom: -13.392%;
    transform: translateX(50%) rotate(-60deg) skewY(30deg);
  }
  #categories li:nth-child(3n+3):last-child {
    margin-bottom: 0;
  }
  #categories li:nth-child(3n+3) {
    margin-left: 0.5%;
  }
  #categories li:nth-child(3n+2) {
    margin-left: 1%;
  }
  #categories li:nth-child(3n+4) {
    clear: left;
  }
}