.box-container {
  display: inline-block;
  margin: 0;
  padding: 0;
  margin-top: 1.4em;
  width: 100%;
}

.box {
  list-style-type: none;
  float: left;
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity 0.2s, transform 0.35s;
}

.box.show {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.4s, transform 0.35s;
}

.box .inner {
  padding: 10px;
  position: relative;
}

.box a {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

.box img {
  width: calc(100% + 50px);
  max-width: calc(100% + 50px);
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(-40px, 0, 0);
}

.box a::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  z-index: 99;
  opacity: 0;
  transition: opacity 0.4s;
}

.three-cols .box {
  width: 100%;
}

.four-cols .box {
  width: 23.1%;
}

.four-cols .box:nth-child(4n+0) {
  margin-right: 0;
}

.four-cols .box:nth-child(4n+1) {
  clear: both;
  margin-left: 0;
}


@media (min-width: 390px) {
  .three-cols .box {
    width: 50%;
  }
}

@media (min-width: 576px) {

  .three-cols .box {
    width: 33.3%;
  }

  .three-cols .box:nth-child(3n+0) {
    margin-right: 0;
  }

  .three-cols .box:nth-child(3n+1) {
    margin-left: 0;
  }
}


@media (min-width: 992px) {
  .box:hover img {
    transform: translate3d(0, 0, 0);
    transition: opacity 0.35s, transform 0.35s;
  }

  .box:hover a::before {
    opacity: 0.3;
    transition: opacity 0.5s;
  }
}


/* path {
    stroke-opacity: 0;
}

path.hw {
    stroke-opacity: 1;
}
 */