@import url(//fonts.googleapis.com/css?family=Lato:300);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*:before, *:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: Lato, Arial, "Hiragino Kaku Gothic Pro W3", Meiryo, sans-serif;
  background-color: #f1f1f1;
  color: #464646;
  text-align: center;
  margin: 0 auto;
}
body a, body a:visited {
  color: #555;
  text-decoration: none;
}
body a:hover {
  color: #444;
}

article figure::after, article figure .image, article figure .lighting, article .item-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

article .item-wrapper, article .item-content {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

article .item-wrapper, article figure, article .item-content {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

article {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: calc(33.33% - 4%);
  height: 24vw;
  margin: 1.8%;
  -webkit-perspective: 1600px;
          perspective: 1600px;
  cursor: pointer;
}
article .item-wrapper {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
article .item-wrapper::before {
  content: '';
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  box-shadow: 0 8px 38px rgba(0, 0, 0, 0.86);
}
article .item-wrapper:hover::before {
  box-shadow: 0 14px 64px rgba(0, 0, 0, 0.92);
}
article .item-wrapper.enter.ease, article .item-wrapper.leave {
  -webkit-transition: all .1s ease-in;
  transition: all .1s ease-in;
}
article figure {
  width: 100%;
  height: 100%;
}
article figure::after {
  content: '';
  background-color: rgba(0, 0, 0, 0.06);
}
article figure .image {
  background-position: center;
  background-size: cover;
}
article figure .lighting {
  background: -webkit-linear-gradient(315deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);
}
article .item-content {
  pointer-events: none;
  padding: 20% 20px 20px;
  color: #fff;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.76);
}
article .item-content h1 {
  margin-bottom: 5%;
  -webkit-transform: translateZ(100px);
          transform: translateZ(100px);
}
article .item-content p {
  font-size: 13px;
  margin-bottom: 5%;
  -webkit-transform: translateZ(50px);
          transform: translateZ(50px);
}
article .item-content .author {
  -webkit-transform: translateZ(70px);
          transform: translateZ(70px);
}

@media (max-width: 860px) {
  article {
    width: calc(50vw - 3.9vw);
    height: 38vw;
  }
}
@media (max-width: 667px) {
  article {
    width: calc(100vw - 3.9vw);
    height: 60vw;
  }
}