@charset "utf-8";

/* HERO */
	.hero {
		display: grid;
		grid-template-rows: 20rem 20rem 1fr;
		position: relative;
		z-index: 1;
		}
	.hero-media {
		grid-area: 2 / 1 / span 2 / span 1;
		position: relative;
		z-index: 1;
		}
	.hero-media::after {
		background: linear-gradient(to bottom, var(--mywp-dark) 0%, var(--mywp-dark-0) 50%);
		z-index: 3;
		}
	.hero-media .hero-picture,
	.hero-media .hero-picture > * {
		height: 100%;
		object-fit: cover;
		width: 100%;
		}
	.hero-holder {
		grid-area: 1 / 1 / span 2 / span 1;
		position: relative;
		z-index: 4;
		}
	.hero-content {
		padding: var(--mywp-mg-more) var(--mywp-mg-pad) 0;
		text-align: left;
		}
	.hero-headers {
		font-size: 1rem;
		}
	.hero-header {
		font-size: 1.2em;
		font-weight: 700;
		line-height: 1em;
		text-transform: uppercase;
		text-wrap: balance;
		}
	.hero-header-sub {
		font-size: 4.8em;
		font-weight: 700;
		line-height: 1em;
		text-wrap: balance;
		}
	.hero-intro {
		margin: 2rem 0;
		text-wrap: balance;
		}
	.hero-buttons.buttons-group {
		margin: 0;
		}
	@media (min-width: 30em) {
		.hero-headers {
			font-size: 1.2rem;
			}
	}
	@media (min-width: 40em) {
		.hero {
			grid-template-rows: 10rem 10rem 1fr;
			}
		.hero-headers {
			font-size: 1.6rem;
			}
	}
	@media (min-width: 40em) {
		.hero {
			grid-template-rows: 1rem 1rem 1fr;
			}
		.hero-headers {
			font-size: 1.6rem;
			}
	}
	@media (min-width: 60em) {
		.hero {
			grid-template-rows: 1fr;
			}
		.hero-holder,
		.hero-media {
			grid-area: 1 / 1;
			}
		.hero-media .hero-picture,
		.hero-media .hero-picture > * {
			position: absolute;
			}
		.hero-media::after {
			background: linear-gradient(to left, var(--mywp-dark-90) 45%, var(--mywp-dark-0) 65%);
			z-index: 3;
			}
		.hero-holder {
			padding-inline: var(--mywp-mg-pad);
			}
		.hero-content {
			padding: var(--mywp-mg-huge) 0 var(--mywp-mg-more);
			margin-inline: auto;
			max-width: 128rem;
			}
		.hero-info {
			margin-left: 50%;
			}
		.hero-headers {
			font-size: 1.2rem;
			}
	}
	@media (min-width: 60em) {
		.hero-headers {
			font-size: 1.4rem;
			}
	}
	@media (min-width: 80em) {
		.hero-headers {
			font-size: 1.8rem;
			}
	}
	@media (min-width: 100em) {
		.hero-headers {
			font-size: 2rem;
			}
		.hero-image {
			padding-left: var(--mywp-mg-pad);
			}
	}