.hero {
	margin-top: calc(-1 * (var(--rhythm-sm) + var(--rhythm-md)));
	margin-bottom: var(--rhythm-2xl);
	margin-left: calc(-1 * var(--gutter));
	margin-right: calc(-1 * var(--gutter));
	width: calc(100% + (2 * var(--gutter)));
	box-shadow: var(--shadow-elevation-2);
}

.hero .content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--rhythm-xl) var(--gutter);
	background: linear-gradient(140deg, var(--primary-300) 0%, var(--primary-500) 100%);
}

.hero .content::after {
	content: '';
	position: absolute;
	bottom: -14px;
	left: 0;
	width: 100%;
	height: 28px;
	border-top: 6px solid var(--gray-100);
	border-bottom: 6px solid var(--gray-100);
	background-color: var(--primary-500);
	transform: skewY(2deg);
}

.hero .title {
	font-family: var(--font-display);
	font-size: var(--font-size-display-sm);
	font-weight: var(--font-weight-display-sm);
	line-height: var(--font-line-height-display-sm);
	letter-spacing: var(--font-letterspacing-display-sm);
	color: var(--secondary-800);
	margin: 0;
}

.hero .description {
	color: var(--secondary-900);
	margin-bottom: var(--rhythm-sm);
	font-size: var(--font-size-text-lg);
	font-weight: var(--font-weight-text-lg);
	line-height: var(--font-line-height-text-lg);
	letter-spacing: var(--font-letterspacing-text-lg);
}

.hero .cta,
.hero .cta:visited {
	display: inline-block;
	padding: var(--rhythm-xs) var(--rhythm-sm);
	background-color: var(--tertiary-400);
	color: var(--tertiary-900);
	-webkit-text-decoration: none;
	text-decoration: none;
	border-radius: var(--radius-xs);
	font-family: var(--font-display);
	font-size: var(--font-size-text-lg);
	font-weight: var(--font-weight-display-sm);
	line-height: var(--font-line-height-display-sm);
	letter-spacing: var(--font-letterspacing-display-sm);
	box-shadow: var(--shadow-elevation-2);
	transition: color var(--transition-md), background-color var(--transition-md), box-shadow var(--transition-md);
}

@media (hover: hover) {
	.hero .cta:visited:hover,
	.hero .cta:hover {
		background-color: var(--tertiary-500);
		box-shadow: var(--shadow-elevation-3);
	}
}

.hero .cta:focus-visible,
.hero .cta:visited:focus-visible {
	background-color: var(--tertiary-500);
	box-shadow: var(--shadow-elevation-3);
}

@media (min-width: 48em) {
	.hero {
		position: relative;
		display: flex;
		flex-direction: row-reverse;
		max-height: calc(100vh - 59.32px);
		background-color: var(--primary-500);
	}

	.hero .content::after {
		display: none;
	}

	.hero .content {
		flex: 1 0 50%;
		justify-content: center;
		padding-left: 11vw;
		clip-path: polygon(29% 0, 100% 0, 100% 100%, 0 100%);
		margin-left: -7.25%;
	}

	.hero::before {
		content: '';
		position: absolute;
		width: 56.48%;
		height: 100%;
		top: 0;
		right: 0;
		background-color: var(--gray-100);
		clip-path: polygon(29.325% 0, 100% 0, 100% 100%, 0 100%);
		transform: translateX(-2.25%);
	}

	.hero .hero-img {
		flex: 1 0 50%;
		clip-path: polygon(0 0, 100% 0, 71% 100%, 0 100%);
		margin-right: -7.25%;
		z-index: 1;
	}

	.hero::after {
		content: '';
		position: absolute;
		width: 56.48%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: var(--gray-100);
		clip-path: polygon(0 0, 100% 0, 70.675% 100%, 0 100%);
		transform: translateX(2.25%);
	}

	.hero .hero-img,
	.hero .hero-img img {
		max-width: none;
		max-width: initial;
		width: 100%;
	}
}

@media (min-width: 62.5em) {
	.hero {
		max-height: calc(100vh - 90.5px);
	}
}

@media (min-width: 75em) {
	.hero .title {
		font-size: var(--font-size-display-md);
		font-weight: var(--font-weight-display-md);
		line-height: var(--font-line-height-display-md);
		letter-spacing: var(--font-letterspacing-display-md);
	}

	.hero .description {
		margin-bottom: var(--rhythm-md);
	}
}

@media (min-width: 78.75em) {
	.hero {
		margin-left: calc(-1 * (100vw - var(--body-max-width)) / 2);
		margin-right: calc(-1 * (100vw - var(--body-max-width)) / 2);
		width: calc(100% + (100vw - var(--body-max-width)));
	}
}