.wrapper {
    margin: 10px auto 0;
}

ul.cards {
	padding: 0;
}

.cards, .card, .view {
	display: flex;
	align-items: center;
	justify-content: center;
}

.cards {
	height: 534px;
	width: 700px;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
}

	.cards .card {
		cursor: pointer;
		position: relative;
		perspective: 1000px;
		transform-style: preserve-3d;
		height: calc(100% / 4 - 10px);
		width: calc(100% / 4 - 10px);
	}

.card.shake {
	animation: shake 0.35s ease-in-out;
}

@keyframes shake {
	0%, 100% {
		transform: translateX(0);
	}

	20% {
		transform: translateX(-13px);
	}

	40% {
		transform: translateX(13px);
	}

	60% {
		transform: translateX(-8px);
	}

	80% {
		transform: translateX(8px);
	}
}

.cards .card .view {
	width: 100%;
	height: 100%;
	user-select: none;
	pointer-events: none;
	position: absolute;
	backface-visibility: hidden;
	transition: transform 0.25s linear;
	box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.card .front-view img {
	max-width: 170px;
	border-radius: 7px;
	border: 2px solid #d5b160;
}

.card .back-view {
	transform: rotateY(-180deg);
}

	.card .back-view img {
		max-width: 170px;
		border-radius: 7px;
	}

.card.flip .front-view {
	transform: rotateY(180deg);
}

.card.flip .back-view {
	transform: rotateY(0);
}

.details {
	max-width: 922px;
	padding: 20px;
	border-radius: 7px;
	background: #a58e6e;
	height: calc(100% / 4 - 30px);
	justify-content: space-evenly;
	box-shadow: 0 3px 10px rgb(0 0 0 / 10%);
	margin: 15px auto 0;
}

	.details p {
		font-size: 14px;
		/*height: 17px;*/
		margin: 0;
		text-align: center;
		color: #ffffff;
	}

		.details p span {
			margin-left: 8px;
		}

	.details button {
		cursor: pointer;
		font-size: 14px;
		color: #6563ff;
		border-radius: 4px;
		padding: 4px 11px;
		background: #fff;
		border: 2px solid #6563ff;
		transition: 0.3s ease;
	}

		.details button:hover {
			color: #fff;
			background: #6563ff;
		}

.card {
	background-color: transparent;
	border: none;
}

.top-details {
	margin-bottom: 15px;
	padding: 0 20px;
	border-radius: 7px;
	background: #fff;
	height: calc(100% / 4 - 30px);
	justify-content: space-evenly;
	box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

	.top-details p {
		font-size: 18px;
		height: 17px;
	}

		.top-details p span {
			margin-left: 8px;
		}

		.top-details p b {
			font-weight: 500;
		}

		/********** Media Queries **********/

/********** Tablet Portrait **********/
@media (max-width: 820px) and (min-width: 421px) and (orientation: portrait) {
	.cards {
		height: 454px;
		width: 600px;
		margin-top: 50px;
	}

	.card .front-view img, .card .back-view img {
		max-width: 150px;
	}

	/* .details p {
		font-size: 20px;
	} */
}
/********** Mobile Landscape **********/
@media (max-width: 940px) and (orientation: landscape) {
	.card .front-view img, .card .back-view img {
		max-width: 140px;
	}

	.cards {
		height: 464px;
		width: 588px;
	}

	.details p {
		font-size: 16px;
	}
}
/********** Mobile Portrait **********/
@media (max-width: 460px) and (orientation: portrait) {
	.details {
		padding: 5px;
	}

	.cards {
		height: 247px;
		width: 320px;
		margin-top: 0px;
	}

	.card .back-view img, .card .front-view img {
		max-width: 80px;
	}

	/* .details p {
		font-size: 14px;
		height: 26px;
	} */
}