@charset "utf-8";

/* HERO */
	.hero-graphic {
		display: grid;
		position: relative;
		z-index: 1;
		}
	.hero-graphic-info,
	.hero-graphic-image {
		position: relative;
		z-index: 2;
		}
	.hero-graphic-content {
		text-align: left;
		}
	.hero-graphic-headers {
		font-size: 1rem;
		}
	.hero-graphic-header {
		color: var(--color-important);
		font-size: 1.25em;
		font-weight: var(--heavy);
		margin-bottom: 1rem;
		text-align: right;
		}
	.hero-graphic-header-sub {
		font-size: 2.5em;
		font-weight: 400;
		text-align: right;
		text-transform: uppercase;
		}
	.hero-graphic-header-sub > strong {
		font-weight: var(--heavy);
		}
	.hero-graphic-header-sub > span {
		font-weight: 700;
		}
	.hero-graphic-header-sub > span.c1 {
		color: var(--hue-color);
		}
	.hero-graphic-header-sub > span.c2 {
		color: var(--hue-highlight);
		}
	.hero-graphic-header-sub > span.c3 {
		color: transparent;
		-webkit-text-stroke-width: 0.1rem;
		text-stroke-width: 0.1rem;
  		-webkit-text-stroke-color: var(--hue-highlight);
  		text-stroke-color: var(--hue-highlight);
		}
	.hero-graphic-intro {
		margin: 2rem 0;
		text-wrap: balance;
		}
	.hero-graphic-buttons.buttons-group {
		justify-content: flex-end;
		margin: 2rem 0 0;
		}
	.hero-graphic-image {
		position: relative;
		}
	.hero-graphic-image::before {
		--pattern: url('../images/arrows-pattern.png');
		background-color: var(--hue-color);
		content: '';
		height: 100%;
		left: 30%;
		-webkit-mask-position: center center;
		mask-position: center center;
		-webkit-mask-repeat: repeat;
		mask-repeat: repeat;
		-webkit-mask-image: var(--pattern);
		mask-image: var(--pattern);
		-webkit-mask-repeat: repeat;
		mask-repeat: repeat;
		position: absolute;
		width: 40%;
		top: 0;
		z-index: -1;
		}
	.hero-assortment {
		--gap: 2rem;
		align-items: flex-start;
		grid-template-columns: 1fr 1fr;
		margin: var(--gap) 0;
		}
	.hero-assortment,
	.hero-assortment-items {
		--gap: 2rem;
		display: grid;
		grid-gap: var(--gap);
		}
	@media (max-width: 49.99em) {
		.hero-graphic-content {
			padding: var(--margin-pad);
			text-align: left;
			}
		.hero-graphic-image {
			grid-row: 1;
			margin: 0;
			}
		.hero-assortment {
			padding-inline: var(--margin-pad);
			}
	}
	@media (min-width: 30em) {
		.hero-graphic-headers {
			font-size: 1.45rem;
			}
	}
	@media (min-width: 40em) {
		.hero-graphic-headers {
			font-size: 2rem;
			}
		.hero-graphic-header-sub > span.c3 {
			-webkit-text-stroke-width: 0.2rem;
			text-stroke-width: 0.2rem;
			}
	}
	@media (min-width: 50em) {
		.hero-graphic {
			align-items: center;
			display: grid;
			grid-gap: 0;
			grid-template-columns: 1fr 1fr;
			}
		.hero-graphic-info {
			align-self: center;
			display: flex;
			padding: 0 0 0 var(--margin-pad);
			}
		.hero-graphic-content {
			align-items: center;
			display: flex;
			justify-content: flex-end;
			padding: 0;
			text-align: left;
			width: 100%;
			}
		.hero-graphic-holder {
			max-width: 80rem;
			padding: var(--margin-pad) 0;
			width: 100%;
			}
		.hero-graphic-headers {
			font-size: 1.2rem;
			}
		.hero-assortment {
			padding-right: var(--margin-pad);
			}
		.hero-graphic-image {
			padding: var(--margin-pad) 0;
			margin-left: var(--margin-pad);
			position: relative;
			}
		.hero-graphic-image-src {
			border-radius: var(--radius);
			}
	}
	@media (min-width: 60em) {
		.hero-graphic-headers {
			font-size: 1.4rem;
			}
		.hero-graphic-header {
			font-size: 1.1em;
			}
	}
	@media (min-width: 80em) {
		.hero-graphic-headers {
			font-size: 2rem;
			}
	}
	@media (min-width: 100em) {
		.hero-graphic-headers {
			font-size: 2.5rem;
			}
	}
	@media (min-width: 120em) {
		.hero-graphic-headers {
			font-size: 2.8rem;
			}
	}