.flip-container {
	background-color: transparent;
	height: 200px;
	perspective: 1000px;
	border-radius: 10px;
}
.card-flip {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 1.3s;
	transform-style: preserve-3d;
	border-radius: 10px;
	box-shadow: 2px 3px 2px 1px rgba(0, 0, 0, 0.5);
}
.flip-container:hover .card-flip {
	transform: rotateY(180deg);
}
.card-flip .front img {
	border-radius: 10px;
	width: 100%;
	height: 200px;
}
.front,
.back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;

	align-items: center;
	justify-content: center;
	font-size: 5rem;
	border-radius: 10px;
}
.front {
	color: #fff;
}
.back {
	background-color: #000000f4;
	color: white;
	transform: rotateY(180deg);
}

.card-flip .front .text-card-flip {
	position: absolute;
	bottom: -2px;
	width: 100%;
	height: 60px;
	background: rgba(0, 0, 0, 0.8);
	text-align: center;
	border-radius: 0 0 10px 10px;
}
.card-flip .front .text-card-flip span {
	color: #ccc;
	margin-top: 0px;
	font-size: 12px;
}
.back .button-flip {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 45px;
	text-align: center;
	border-radius: 0 0 10px 10px;
}
.line-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	width: 90%;
	margin: auto;
	line-height: 1.2;
	color: #fff;
	margin-bottom: -20px;
}