.cp {
  position: relative;
  clear: both;
  margin: 0 auto;
  padding: 1em 0 4em;
  max-width: 1000px;
  list-style: none;
  text-align: center;
}

/* Common style */
.cp figure {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  width: 100%;
  height: auto;
  background: #3085a3;
  text-align: center;
  cursor: pointer;
}

.cp figure img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;
  opacity: 0.8;
}

.cp figure figcaption {
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.cp figure figcaption::before,
.cp figure figcaption::after {
  pointer-events: none;
}

.cp figure figcaption,
.cp figure figcaption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.cp figure figcaption:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
.cp figure figcaption > a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}

.cp figure h2 {
  word-spacing: -0.15em;
  font-weight: 300;
}

.cp figure h2 span {
  font-weight: 800;
}

.cp figure h2,
.cp figure p {
  margin: 0;
}

.cp figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}

/* Individual effects */

/*---------------*/
/***** Jazz *****/
/*---------------*/

figure.cp-jazz {
  background: -webkit-linear-gradient(-45deg, #f3cf3f 0%, #f33f58 100%);
  background: black;
}

figure.cp-jazz img {
  opacity: 0.9;
}

figure.cp-jazz figcaption::after,
figure.cp-jazz img,
figure.cp-jazz p {
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
}

figure.cp-jazz figcaption::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  content: "";
  opacity: 0;
  -webkit-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1);
  transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

figure.cp-jazz h2,
figure.cp-jazz p {
  opacity: 1;
  -webkit-transform: scale3d(0.8, 0.8, 1);
  transform: scale3d(0.8, 0.8, 1);
}

figure.cp-jazz h2 {
  padding-top: 26%;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}

figure.cp-jazz p {
  padding: 3em 2em;
  text-transform: none;
  font-size: 15px;
  opacity: 0;
}

figure.cp-jazz:hover img {
  opacity: 0.7;
  -webkit-transform: scale3d(1.05, 1.05, 1);
  transform: scale3d(1.05, 1.05, 1);
}

figure.cp-jazz:hover figcaption::after {
  opacity: 1;
  -webkit-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1);
  transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1);
}

figure.cp-jazz:hover h2,
figure.cp-jazz:hover p {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

/*---------------*/
/***** Ming *****/
/*---------------*/

/* Media queries */
@media screen and (max-width: 500px) {
  .cp {
    padding-bottom: 0em;
  }
  figure.cp-jazz p {
    padding: 1.2em 2em;
  }
  .cp a{
	  font-size: 0.9rem;
  }
}
@media screen and (max-width: 50em) {
  .content {
    padding: 0 10px;
    text-align: center;
  }
  .cp figure {
    display: inline-block;
    float: none;
    margin: 10px auto;
    width: 100%;
  }
}