:root {
	--he-color-surface-white-10: rgba(255, 255, 255, 0.1);
	--he-color-overlay-dark-70: rgba(0, 0, 0, 0.7);
	--he-color-overlay-dark-50: rgba(0, 0, 0, 0.5);
	--he-font-weight-medium: 500;
}

@keyframes he-hero-fade-in {
	from {
		opacity: 0;
		transform: translateY(var(--he-space-20));
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.he-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	background-color: var(--he-color-background);
}

.he-hero__media,
.he-hero__overlay {
	position: absolute;
	inset: 0;
}

.he-hero__media {
	overflow: hidden;
	background-color: var(--he-color-heading);
}

.he-hero__image,
.he-hero__image picture,
.he-hero__image img,
.he-hero__media picture,
.he-hero__media img {
	width: 100%;
	height: 100%;
}

.he-hero__media picture,
.he-hero__media img {
	position: absolute;
	inset: 0;
}

.he-hero__media img {
	object-fit: cover;
	transform: none;
}

.he-hero__overlay {
	background: linear-gradient(
		90deg,
		var(--he-color-overlay-dark-70) 0%,
		var(--he-color-overlay-dark-50) 45%,
		rgba(0, 0, 0, 0) 100%
	);
}

.he-hero__container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 80rem;
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--he-space-16);
	padding-left: var(--he-space-16);
}

.he-hero__content {
	max-width: 42rem;
	color: var(--he-color-background);
}

.he-hero__title {
	margin-bottom: var(--he-space-24);
	color: var(--he-color-background);
	animation: he-hero-fade-in 1s ease-out;
}

.he-hero__text {
	margin-bottom: var(--he-space-32);
	color: var(--he-color-border-light);
	font-size: var(--he-type-body-size);
	font-weight: 400;
	line-height: var(--he-type-body-line-height);
}

.he-hero__actions {
	display: flex;
	flex-direction: column;
	gap: var(--he-space-16);
}

.he-hero__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--he-space-8);
	width: 100%;
	padding: var(--he-space-10) var(--he-space-32);
	border: 1px solid transparent;
	border-radius: var(--he-space-6);
	font-family: var(--he-font-body);
	font-size: var(--he-type-body-size);
	font-weight: var(--he-font-weight-medium);
	line-height: var(--he-type-body-line-height);
	text-align: center;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.he-hero__action:focus-visible {
	outline: 2px solid var(--he-color-background);
	outline-offset: 2px;
}

.he-hero__action-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.he-hero__action-icon svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.he-hero__action--primary {
	background-color: var(--he-color-amber);
	color: var(--he-color-background);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.he-hero__action--primary:hover,
.he-hero__action--primary:focus-visible {
	background-color: var(--he-color-amber-dark);
	transform: scale(1.05);
}

.he-hero__action--secondary {
	background-color: var(--he-color-surface-white-10);
	color: var(--he-color-background);
	border-color: var(--he-color-background);
	backdrop-filter: blur(var(--he-space-4));
	-webkit-backdrop-filter: blur(var(--he-space-4));
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.he-hero__action--secondary:hover,
.he-hero__action--secondary:focus-visible {
	background-color: var(--he-color-background);
	color: var(--he-color-heading);
}

@media (min-width: 640px) {
	.he-hero__container {
		padding-right: var(--he-space-24);
		padding-left: var(--he-space-24);
	}

	.he-hero__actions {
		flex-direction: row;
		align-items: center;
	}

	.he-hero__action {
		width: auto;
	}
}

@media (min-width: 768px) {
	.he-hero__text {
		font-size: var(--he-type-body-large-size);
		line-height: var(--he-type-body-large-line-height);
	}
}

@media (min-width: 1024px) {
	.he-hero__container {
		padding-right: var(--he-space-32);
		padding-left: var(--he-space-32);
	}
}