.card4 {
  width: 100%;
  position: relative;
  /* min-height: 100px; */
  height: 200px;
  float: left;
}

.front {
  display: block;
  padding: 15px; 
}

.back {
  background-color: #f00;
  padding-left: 15px; 
  padding-right: 15px; 
}

.card4 > .front {
  position:absolute; 
  transform: perspective(500px) rotateX(0deg);
  backface-visibility: hidden;
  width: 100%;
  /* min-height: 100px; */
  height: 200px;
  background-color: #fff;
  transition: transform .5s linear 0s;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
}

.card4 > .back {
  position:absolute; 
  transform: perspective(500px) rotateX(180deg);
  backface-visibility: hidden;
  width: 100%;
  /* min-height: 100px; */
  height: 200px;
  background-color: #fff;
  transition: transform .5s linear 0s;
  border: 1px solid #f3f3f3;
  border-radius: 10px;
}

.card4:hover > .front {
  transform: perspective(500px) rotateX(-180deg); 
}

.card4:hover > .back {
  transform: perspective(500px) rotateX(0deg); 
}

.front h2, .back h2 {
	color: #000;
	font-size: 20px;
	font-weight: 700;
	margin: 10px 0
}