<style>			

	.content{
	  max-width:1000px;
	  margin:100px auto;
	  display:flex;
	  flex-wrap:wrap;
	  justify-content:space-around;
	}

	.card{
	  position:relative;
	  margin:20px 0;
	  width:100%;
	  height:300px;
	  background: #fff;
	  transform-style:preserve-3d;
	  transform:perspective(2000px);
	  transition:1s;
	  box-shadow:inset 100px 0 50px rgba(0,0,0,0.5);
	}

	.card:hover{
	  z-index:1111;
	  transform:perspective(2000px) rotate(-5deg);
	  box-shadow:inset 20px 0 50px rgba(0,0,0,0.5);
	}

	.card .img-container{
	  position:relative;
	  width:100%;
	  height:100%;
	  border:1px solid #000;
	  box-sizing:border-box;
	  transform-origin:left;
	  z-index:1;
	  transition:1s;
	}

	.card .img-container img{
	  position:absolute;
	  left:0;
	  top:0;
	  height:100%;
	  width:100%;
	  object-fit:cover;
	}

	.card:hover .img-container{
	  transform:rotateY(-135deg);
	}

	.card .card-details{
	  position:absolute;
	  left:0;
	  top:0;
	  box-sizing:border-box;
	  padding:20px;
	  color:#000;
	}

	 .card .card-details h2{
	  margin:0;
	  padding:0.5em 0;
	  text-transform:uppercase;
	  font-size:2em;
	  color:#ed363a;
	}

	.card .card-details p{
	  margin:0;
	  padding:0;
	  line-height:25px;
	  font-size:1.1em;
	}
	</style>	