.cards{
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.card{
	width: 360px;
	height: 500px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 32px -10px rgba(0, 0, 0, 0.8);
	box-sizing: border-box;
}

.card *{
	box-sizing: border-box;
}

.card > .content{
	width: 100%;
	text-align: center;
	background-color: #86B971;
	padding: 0 60px 50px;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateY(0);
	transition: all 0.35s 0.35s cubic-bezier(0.1, 0.72, 0.4, 0.97);
	z-index: 1;
}

.card > .content::before,
.card > .content::after{
	content: "";
	width: 100%;
	height: 120px;
	background-color: inherit;
	position: absolute;
	left: 0;
	z-index: -1;
}

.card > .content::before{
	top: -80px;
	-webkit-clip-path: ellipse(60% 80px at bottom center);
	clip-path: ellipse(60% 80px at bottom center);
}
.card > .content::after{
	bottom: -80px;
	-webkit-clip-path: ellipse(60% 80px at top center);
	clip-path: ellipse(60% 80px at top center);
}

.card > .content h3{
	font-size: 1.5rem;
	margin-bottom: 1em;
}

.card > .content h3 span{
	color: #2d7f0b;
}

.card > .content p{
	font-size: 0.75rem;
}

.card > img{
	width: 100%;
	height: 100%;
	transform: scale(1.2);
	transition: 0.35s 0.35s transform cubic-bezier(.1,.72,.4,.97);
}

.card:hover > .content{
	background-color: #DEE8C2;
	bottom: 100%;
	transform: translateY(100%);
	padding: 50px 60px;
	transition: all 0.35s cubic-bezier(0.1, 0.72, 0.4, 0.97);
}

.card:hover > img{
	transform: scale(1);
	transition: 0.35s 0.1s transform cubic-bezier(0.1, 0.72, 0.4, 0.97);
}