:root {
	--card-dark-purple: #372554;
	--card-purple: #7d53de;
}

*::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: #eac8ca;
}

.card__contents {
	margin-top: 3.5em;
}

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

.card__btn {
	position: absolute;
	padding: 0.7em 3em;
	border: none;
	bottom: 2em;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	border-radius: var(--corner-radius);
	cursor: pointer;
}

.card--dark-purple {
	margin-right: 4em;
	background-color: var(--card-dark-purple);
	color: #fff;
}

.card--dark-purple span,
.card--purple span {
	color: #afcbff;
}

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

.card--dark-purple .card__btn {
	background-color: #69008e;
	color: white;
}

.card--purple .card__btn {
	background-color: white;
	color: var(--card-purple);
}

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

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

	.card--dark-purple {
		margin: 0 0 2em 0;
	}
}