.work-list {
  overflow: hidden;
  margin-bottom: -40px;
}
.work-sizer {
  width: calc(50% - 20px);
}
.work-gutter {
  width: 40px;
}
.work-item {
  float: left;
  display: block;
  width: calc(50% - 20px);
  padding-bottom: 35%;
}
.work-item:nth-child(6n+1), .work-item:nth-child(6n-1) {
  padding-bottom: 70%;
}
.work-item.show .work-img:after {
  width: 0;
}
.work-item:hover .work-line:after {
  width: 100%;
}
.work-item:hover .work-view {
  color: #000;
}
.work-item:hover .work-img-inner {
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
.work-img {
  position: absolute;
  top: 0;
  width: 100%;
  height: calc(100% - 100px);
  overflow: hidden;
}
.work-img:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background: #FFF;
  -moz-transition: width 0.6s, height 0.6s;
  -o-transition: width 0.6s, height 0.6s;
  -webkit-transition: width 0.6s, height 0.6s;
  transition: width 0.6s, height 0.6s;
}
.work-img-inner {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  -webkit-transition: -webkit-transform 1s;
  transition: transform 1s;
}
.work-text {
  position: absolute;
  bottom: 40px;
  width: 100%;
  opacity: 0;
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
  -moz-transition: opacity 0.6s, -moz-transform 0.6s;
  -o-transition: opacity 0.6s, -o-transform 0.6s;
  -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
  transition: opacity 0.6s, transform 0.6s;
}
.show .work-text {
  opacity: 1;
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}
.work-name {
  margin: 15px 0 5px;
  font-size: 0.875rem;
  color: #000;
}
.work-view {
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  font-size: 0.75rem;
  color: #999;
  line-height: 20px;
}
.work-view .view {
  -moz-transform-origin: right center;
  -ms-transform-origin: right center;
  -webkit-transform-origin: right center;
  transform-origin: right center;
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
.work-line {
  position: relative;
  height: 1px;
  width: 100%;
}
.work-line:before {
  content: "";
  width: 100%;
  height: 1px;
  background: #ccc;
  display: block;
}
.work-line:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 1px;
  background: #666;
  -moz-transition: width 0.6s;
  -o-transition: width 0.6s;
  -webkit-transition: width 0.6s;
  transition: width 0.6s;
}

@media screen and (max-width: 1100px) {
  .work-item, .work-sizer {
    width: calc(50% - 10px);
  }
  .work-img {
    height: calc(100% - 80px);
  }
  .work-gutter {
    width: 20px;
  }
  .work-text {
    bottom: 20px;
  }
}
@media screen and (max-width: 640px) {
  .work-item, .work-sizer {
    width: 100%;
  }
  .work-item {
    padding-bottom: 70%;
  }
  .work-gutter {
    width: 0;
  }
}