ul.container {
  margin: 0 -10px;
  padding: 0;
}

.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%;
  aspect-ratio: 1 / 1;
  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.2;
  transition: opacity 0.4s;
}


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

}

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

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

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

.box:hover img {
  transform: translate3d(0px, 0px, 0px);
  transition: opacity 0.35s, transform 0.35s;
}

.box-container {
  display: inline-block;
  width: 100%;
  margin: 1.4em 0px 0px;
  padding: 0px;
  list-style: none;
}

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

.box:hover img {
  transform: translate3d(0, 0, 0);
  transition: opacity 0.35s, transform 0.35s;
}

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

h4 {
  margin-top: 0;
}