@charset "utf-8";

/* HERO */
	.hero {
		position: relative;
		z-index: 1;
		}
	.hero-info {
		padding-right: var(--mywp-mg-pad);
		padding-left: var(--mywp-mg-pad);
		position: relative;
		z-index: 4;
		}
	.hero-content {
		margin: 4rem auto 1rem;
		max-width: 128rem;
		text-align: left;
		width: 100%;
		}
	body.home .hero-content {
		padding-top: 6rem;
		}
	@media (min-width: 60em) {
		body.home .hero-content {
			padding-top: 10rem;
			}
	}
	.hero-headers {
		font-size: 1rem;
		}
	.hero-header {
		font-size: 1.4em;
		font-weight: 700;
		line-height: 1.2em;
		}
	.hero-header-sub {
		font-size: 2.8em;
		font-weight: var(--mywp-heavy);
		margin: 1.6rem 0;
		}
	.hero-header-sub em {
		font-style: normal;
		position: relative;
		}
	.hero-header-sub em::after {
		background-color: var(--mywp-highlight);
		border-radius: 0.4rem;
		bottom: 0.1em;
		content: '';
		height: 0.5rem;
		left: 0;
		position: absolute;
		transform: rotate(-2deg);
		width: 100%;
		z-index: -1;
		}
	.hero-intro > p {
		margin: 0;
		}
	.hero-buttons.buttons-group {
		margin: 2rem 0 0;
		}
	@media (min-width: 40em) {
		.hero-content {
			margin-top: 8rem;
			}
		.hero-headers {
			font-size: 1.5rem;
			}
	}
	@media (min-width: 60em) {
		.hero {
			display: grid;
			}
		.hero-image,
		.hero-info {
			grid-area: 1 / 1;
			}
		.hero-image {
			position: relative;
			}
		.hero-image::before {
			background: linear-gradient(to bottom, var(--mywp-light-90) 0%, var(--mywp-light-0) 40%);
			content: '';
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
			z-index: 2;
			}
		.hero-image > *,
		.hero-image > * > * {
			height: 100%;
			object-fit: cover;
			object-position: center;
			position: absolute;
			width: 100%;
			}
		.hero-content {
			margin: 8rem auto;
			}
		.hero-headers {
			font-size: 1.2rem;
			width: 50%
			}
		.hero-header {
			font-size: 1.2em;
			}
	}
	@media (min-width: 80em) {
		.hero-content {
			margin: 14rem auto;
			}
		.hero-headers {
			font-size: 1.6rem;
			}
	}
	@media (min-width: 100em) {
		.hero-content {
			margin: 16rem auto;
			}
		.hero-headers {
			font-size: 2rem;
			}
		.hero-header {
			font-size: 1em;
			}
	}