.hero {
	display: flex;
	flex-direction: column;
	width: calc(100% - 4em);
	max-width: 33em;
	padding-top: 12em;
	margin: 0 auto;
	text-align: center;
	gap: 2em;

	> p {
		max-width: 31rem;
		font-size: 1.25em;
		margin: 0 auto;
	}
}

.features-wrapper {
	display: flex;
	justify-content: center;
	gap: 2em;
	flex-wrap: wrap;
	margin-top: 4em;
}

.feature {
	flex: 1 1 30%;
	max-width: 30em;
	text-align: center;
	padding: 2em;
}

.hero-buttons {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 1em;
	z-index: 1;
}

.preview-container {
	width: 100%;
	margin-top: -9em;
	padding-top: 9em;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 95%);
}

.preview {
	display: block;
	width: 75em;
	max-width: calc(100% - 2em);
	margin: 3em auto;
	filter: drop-shadow(0 -1.5em 3em #ae51ff59);
	border-radius: 15px;
}

@media (max-width: 48em) {
	h1 {
		font-size: 3em;
	}

	.hero {
		> p {
			font-size: 1em;
		}
	}
}