:root {
	--card-red: #e15554;
	--card-turquoise: #2fe6de;
}

*::before,
*::after,
* {
	box-sizing: border-box;
}

body {
	--background: #f4f2fd;

	display: grid;
	margin: 0;
	place-content: center;
	min-height: 100vh;
	font-family: 'Work Sans', sans-serif;
	background-color: var(--background);
	color: hsl(0, 0%, 14%);
}

span {
	display: block;
	font-size: 1.2em;
	font-weight: 600;
}

i {
	margin-right: 0.5em;
}

ul {
	padding: 0;
	list-style: none;
}

main {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.card {
	--corner-radius: 10px;

	position: relative;
	padding: 2em 4em 5em 4em;
	height: 80vh;
	border-radius: var(--corner-radius);
	box-shadow: 4px 12px 20px hsl(0, 0%, 82%);
}

.card__subtext {
	font-size: 1em;
}

.card__price {
	font-size: 3em;
	font-weight: 600;
}

.card p {
	color: #fff;
}

.card__contents {
	margin-top: 3.5em;
}

.card__contents li {
	margin-bottom: 0.75em;
}

.card__btn {
	position: absolute;
	padding: 1.2em 3em;
	border: none;
	bottom: 0em;
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	border-bottom-left-radius: var(--corner-radius);
	cursor: pointer;
	width: 100%;
	border-bottom-right-radius: var(--corner-radius);
}

.card--red {
	margin-right: 4em;
	background-color: var(--card-red);
}

.card--red span,
.card--turquoise span {
	color: #1c3041;
}

.card--turquoise {
	background-color: var(--card-turquoise);
}

.card--red .card__btn {
	background-color: #89043d;
	color: #fff;
}

.card--turquoise .card__btn {
	background-color: #0f7173;
	color: #fff;
}

.card__btn-wrapper {
	display: flex;
	justify-content: center;
}

@media screen and (max-width: 768px) {
	main {
		margin: 1em 0;
	}

	.card--red {
		margin: 0 0 2em 0;
	}
}