.card {}

/*-------------------------------------------------------------------------------------------*/

.card > .wrapper {
	position: relative;
	transform-style: preserve-3d;
	transition: transform .4s ease-out;
}
.card:hover > .wrapper { transform: rotateY(180deg); }
.card > .wrapper > div {
	overflow: hidden;
	backface-visibility: hidden;
	border-radius: 30px;
}

/*----------------------------------------------------------------------------------------------*/

.card > .wrapper > .front {
	display: grid;
	grid-template-areas:
		'thumbnail thumbnail'
		'info tag';
	grid-template-rows: 1fr auto;
	grid-template-columns: 1fr auto;
	align-items: center;
	row-gap: 35px;
	column-gap: 25px;
	padding: 50px;
	
	background-color: #F4F4F4;
	background-image: linear-gradient(to top left, rgba(0,0,0,.05), transparent);
	
	isolation: isolate;
}
.card > .wrapper > .front > .thumbnail {
	grid-area: thumbnail;
	position: relative;
	padding-top: 100%;
}
.card > .wrapper > .front > .thumbnail > .media-element {
	position: absolute; top: 0; left: 0;
	overflow: hidden;
	border-radius: 5px;
	filter: drop-shadow(10px 10px 5px rgba(0,0,0,.3));
}
.card > .wrapper > .front > .thumbnail > .media-element > img {
	object-fit: contain;
}
.card > .wrapper > .front > .info {
	grid-area: info;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 5px;
}
.card > .wrapper > .front > .info > .title {
	font-size: 16px;
	font-weight: 400; 
}
.card > .wrapper > .front > .info > .price {
	font-size: 13px;
	color: #818181;
}
.card > .wrapper > .front > .tag {
	grid-area: tag;
	padding: 0 20px;
	
	border: solid 1px;
	border-radius: 25px;
	
	line-height: 36px;
	font-size: 12px;
}

/*----------------------------------------------------------------------------------------------*/

.card > .wrapper > .back {
	position: absolute; top: 0; left: 0;
	height: 100%; width: 100%; transform: rotateY(180deg);
}