@charset "utf-8";

/* HERO */
	:root {
		--mywp-hero-gap: 6rem;
	}
	.hero {
		background-image: url('../images/diamond.png');
		background-position: left bottom;
		background-repeat: repeat-x;
		background-size: auto 3.6rem;
		display: grid;
		grid-template-rows: min-content var(--mywp-hero-gap) min-content;
		padding-bottom: 3.6rem;
		position: relative;
		z-index: 15;
		}
	.hero-image {
		grid-area: 1 / 1 / span 2 / span 1;
		}
	.hero-content {
		display: grid;
		grid-area: 2 / 1 / span 2 / span 1;
		position: relative;
		z-index: 2;
		}
	@media (max-width: 59.99em) {
		.hero-content::before {
			clip-path: polygon(
				0% 0%,
				calc(100% - (var(--mywp-hero-gap) * 1.5)) 0%,
				100% var(--mywp-hero-gap),
				100% 100%,
				0% 100%
				);
			}
	}
	.hero-holder {
		margin: var(--mywp-mg-normal);
		position: relative;
		z-index: 10;
		}
	.hero-header {
		font-size: 4rem;
		line-height: 1em;
		text-transform: uppercase;
		}
	.hero-header > span,
	.hero-header > strong {
		display: block;
		}
	.hero-header > span {
		font-size: 0.3em;
		font-weight: 600;
		letter-spacing: 0.2em;
		line-height: 1em;
		}
	.hero-header > strong {
		color: var(--mywp-highlight);
		}
	@media (min-width: 22.5em) {
		.hero-header {
			font-size: 4.5rem;
			}
	}
	@media (min-width: 24em) {
		.hero-header {
			font-size: 5rem;
			}
	}
	@media (min-width: 40em) {
		.hero-video,
		.hero-picture {
			aspect-ratio: 5 / 3;
			height: 100%;
			object-fit: cover;
			}
	}
	@media (min-width: 60em) {
		:root {
			--mywp-hero-gap: 4.8rem;
		}
		.hero {
			grid-template-columns: 1fr var(--mywp-hero-gap) var(--mywp-hero-gap) 1fr;
			grid-template-rows: 1fr;
			background-size: auto 7.2rem;
			padding-bottom: 7.2rem;
			}
		.hero-content {
			align-items: center;
			grid-area: 1 / 1 / auto / span 2;
			justify-items: flex-end;
			margin-bottom: -3.6rem;
			margin-top: var(--mywp-hero-gap);
			padding-left: var(--mywp-mg-normal);
			position: relative;
			}
		.hero-content::after {
			background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 1000'%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill:%233f3431;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='b' points='0 1000 330 500 0 0 0 1000'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: left center;
			background-size: contain;
			content: '';
			height: 100%;
			left: calc(100% - 0.1rem);
			pointer-events: none;
			position: absolute;
			top: 0;
			width: 50%;
			z-index: 1;
			}
		.hero-holder {
			margin: var(--mywp-mg-normal) 0;
			max-width: 64rem;
			}
		.hero-image {
			grid-area: 1 / 2 / auto / span 3;
			clip-path: polygon(
				calc(var(--mywp-hero-gap) * (2/3)) 0%,
				100% 0%,
				100% 100%,
				0% 100%,
				0% var(--mywp-hero-gap)
				);
			}
		.hero-header {
			font-size: 6rem;
			}
	}
	@media (min-width: 80em) {
		.hero-header {
			font-size: 8rem;
			}
	}
	@media (min-width: 90em) {
		.hero-header {
			font-size: 9rem;
			}
	}