.hero {
	padding: var(--padding-block);
	align-items: center;
}

.hero__wrapper-img {
	background-image: linear-gradient(var(--color-primary), var(--color-primary-dark-full));
	text-align: center;
	border-radius: 50%;

	padding: .6rem;
}

.hero__img {
	background-image: linear-gradient(var(--color-primary-dark-over), var(--color-primary-dark-full), var(--color-primary-dark-heavy), var(--color-primary-dark-half), var(--color-primary));
	border-radius: 50%;

	width: 35rem;
}

.hero__header {
	text-align: center;
}

.hero__title {
	font-size: var(--font-size-title);
}

.hero__subtitle {
	font-size: var(--font-size-subtitle-xxs);
	font-weight: normal;

	margin-top: var(--space-subsubsection);
}

.hero__content {
	margin: var(--space-subsection) auto 0;
}

.hero__icon {
	text-align: center;
	text-decoration: none;
	padding: var(--padding-content);

	filter: unset;
	transform: scale(100%);

	transition-property: filter, transform;
	transition-duration: 250ms;
	transition-timing-function: var(--ease-out-fast);

	&:hover {
		filter: drop-shadow(0 0 2rem var(--color-primary));
		transform: scale(110%);
	}
}

.hero__username {
	font-size: var(--font-size-subtitle-xxs);
	text-align: center;
}

@media (width < 37.5em) {
	.hero__content {
		width: 90%;
	}
}

@media (width < 30em) {
	.hero__content {
		width: 50%;
	}
}

@media (width < 25.75em) {
	.hero__content {
		width: 70%;
	}
}

@media (width >=90em) {
	.hero {
		height: 65dvh;

		flex-direction: row-reverse;
		justify-content: space-around;
	}

	.hero__wrapper-main {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.hero__img {
		width: 50rem;
	}

	.hero__header {
		text-align: unset;
	}

	.hero__content {
		margin-top: 0;
	}

	.hero__username {
		min-width: fit-content;

		align-self: center;
		order: -1;
	}
}