.hero {
	height: calc(100vh - 85px);
	display: grid;
	place-items: center;
}

.hero .group {
	width: 100%;
	margin-top: -75px;
}

.hero .sub {
	font-size: 24px;
	color: var(--black-4);
	font-weight: 400;
	margin: 0;
	transition: font-size 0.5s;
	font-style: italic;
	font-family: var(--font-body);
}

.hero .large {
	font-size: 110px;
	color: var(--black-2);
	margin: 0;
	font-weight: 800;
	transition: font-size 0.5s;
	background: linear-gradient(45deg, var(--hero-random-1), var(--hero-random-2));
	background-size: 150% 150%;
	animation: gradient 60s ease-in-out infinite;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@media screen and (max-width: 800px) {
	.hero .sub {
		font-size: 16px;
	}
	.hero .large {
		font-size: 84px;
	}
}