.work {
  padding-top: calc(100px - 5.5%);
}
.work-list {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -5.5%;
}
.work-list .project {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 28.12006%;
  flex: 0 0 28.12006%;
  max-width: 28.12006%;
  cursor: pointer;
  margin-left: 5.21327%;
  margin-top: 5.5%;
}
.work-list .project .gallery-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}
.work-list .project .gallery-image img {
  object-fit: cover;
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  height: 100%;
}
.work-list .project .gallery-info {
  line-height: 1.6em;
  font-size: 0.875rem;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  letter-spacing: 0.06em;
  color: #404040;
  padding: 10px 0;
}
.work-list .project:hover .gallery-image img {
  opacity: 0.6;
}
.work-list .project:hover .gallery-info {
  color: #111;
}
.work-list .img-gray .gallery-fill-block {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(136, 129, 123, 0.8);
  z-index: 1;
  cursor: auto;
  top: 0;
}
.work-list .img-gray:hover .gallery-image img {
  opacity: 1;
}

@media screen and (max-width: 800px) {
  .work {
    padding-top: 40px;
  }
  .work-list .project {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 94.5%;
    flex: 0 0 94.5%;
    max-width: 94.5%;
  }
  .work-list .project .gallery-info {
    padding: 0;
  }
  .work-list .project .gallery-name {
    margin: 5.5% 0;
  }
  .work-list .project .gallery-image {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    padding: 66.66% 0 0 0;
  }
  .work-list .project .gallery-image img {
    object-fit: cover;
    display: block;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}