.cover item-a{
    margin-left: -20px;
}

.card{
	
	height: 400px;
	width: 100%;
	margin: 20px 20px;
	transition: ease all ;
	perspective: 1200px;
	&:hover{
		.cover{
			transform: rotateX(0deg) rotateY(-180deg);
			&:before{
				transform: translateZ(30px);
			}
			&:after{
				background-color: #6610f2;
			}
			h1{
				transform: translateZ(100px);
			}
			.price{
				transform: translateZ(60px);
			}
			a{
				transform: translateZ(-60px) rotatey(-180deg);
			}
		}
	}
	
	.cover{
		position: absolute;
		height: 100%;
		width: 100%;
		transform-style: preserve-3d;
  	transition: ease all ;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		&:before{
			content: '';
			position: absolute;
			border: 5px solid rgba(255,255,255,.5);
			box-shadow: 0 0 12px rgba(0,0,0,.3); 
			top:20px;
			left:20px;
			right:20px;
			bottom:20px;
			z-index: 2;
			transition: ease all ;
			transform-style: preserve-3d;
			transform: translateZ(0px);
		}
		&:after{
			content: '';
			position: absolute;
			top:0px;
			left:0px;
			right:0px;
			bottom:0px;
			z-index: 2;
			transition: ease all 1.3s;
			background: rgba(0,0,0,.4);
		}
		&.item-a{
			background-image: url('https://images.unsplash.com/photo-1520412099551-62b6bafeb5bb?auto=format&fit=crop&w=600&q=80');
		}
		&.item-b{
			background-image: url('https://images.unsplash.com/photo-1497250681960-ef046c08a56e?auto=format&fit=crop&w=600&q=80');
		}
		&.item-c{
			background-image: url('https://images.unsplash.com/photo-1525945518069-b924046d1385?auto=format&fit=crop&w=600&q=80');
		}
		h1{
			font-weight: 600;
			position: absolute;
			bottom: 55px;
			left: 50px;
			color: white;
			transform-style: preserve-3d;
  		transition: ease all ;
			z-index:3;
			font-size: 3em;
			transform: translateZ(0px);
		}
		.price{
			font-weight: 200;
			position: absolute;
			top: 55px;
			right: 50px;
			color: white;
			transform-style: preserve-3d;
  		transition: ease all ;
			z-index:4;
			font-size: 2em;
			transform: translateZ(0px);
		}
	}
	.card-back{
		position: absolute;
		height: 100%;
		width: 100%;
		background: #ff62b2;
		transform-style: preserve-3d;
  	transition: ease all ;
		transform: translateZ(-1px);
		display: flex;
		align-items: center;
		justify-content: center;
		a{
			transform-style: preserve-3d;
			transition: ease transform ease background .5s;
			transform: translateZ(-1px) rotatey(-180deg);
			background: transparent;
			border: 1px solid white;
			font-weight: 200;
			font-size: 1.3em;
			color: white;
			padding: 14px 32px;
			outline: none;
			text-decoration: none;
			&:hover{
				background-color: white;
				color: #ff62b2;
			}
		}
	}
}