* {
	font-family: 'EB Garamond', serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.small_caps {
	font-variant: small-caps;
	font-size: 1.5rem;
	letter-spacing: 0.15rem;
	color: #4a4539;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8),
		-0.5px -0.5px 0.5px rgba(0, 0, 0, 0.15);
}

body {
	background: #152238;
	background-image: linear-gradient(to bottom right, #152238, #1f2f4c);
	background-attachment: fixed;
	min-height: 100vh;
	min-height: 100dvh;
}

.content {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem;
}

.card {
	perspective: 150rem;
	height: 20rem;
	width: 30rem;
	position: relative;
}
.card__side {
	height: 15rem;
	transition: all 0.8s ease;
	position: absolute;
	top: 0;
	left: 0;
	margin: auto;
	width: 30rem;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
}
.card__side--front {
	background-color: #ece5d4;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"),
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.1) 0%,
			transparent 50%,
			rgba(0, 0, 0, 0.05) 100%
		);
	background-blend-mode: soft-light, normal;
}
.card__side--back {
	transform: rotateY(180deg);
	background-color: #ece5d4;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"),
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.1) 0%,
			transparent 50%,
			rgba(0, 0, 0, 0.05) 100%
		);
	background-blend-mode: soft-light, normal;
}
.card:hover .card__side--front {
	transform: rotateY(-180deg);
}
.card:hover .card__side--back {
	transform: rotateY(0deg);
}
.card__cont {
	height: 15rem;
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}
.card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 15rem;
}

@media (max-width: 540px) {
	.card {
		width: 90vw;
		max-width: 20rem;
		height: 13rem;
	}
	.card__side {
		width: 90vw;
		max-width: 20rem;
		height: 10rem;
	}
	.card__cont,
	.card__cta {
		height: 10rem;
	}
	.small_caps {
		font-size: 1.2rem;
		letter-spacing: 0.1rem;
	}
}