@charset "utf-8";

/* MEDIA TEXT GRAPHIC */
	.text-graphic {
		--size: 12rem;
		--top: 4rem;
		--pattern: url('../images/arrows-pattern-alt.png');
		font-size: var(--size);
		padding-inline: var(--margin-pad);
		position: relative;
		}
	.text-graphic-both,
	.text-graphic-top {
		margin-top: var(--margin-block);
		}
	.text-graphic-both,
	.text-graphic-bottom {
		margin-bottom: var(--margin-block);
		}
	.text-graphic::after {
		background-color: var(--hue-highlight);
		content: '';
		height: calc(100% - var(--top));
		left: 0;
		-webkit-mask-image: var(--pattern);
		mask-image: var(--pattern);
		-webkit-mask-position: left top;
		mask-position: left top;
		-webkit-mask-repeat: repeat;
		mask-repeat: repeat;
		-webkit-mask-size: 3rem auto;
		mask-size: 3rem auto;
		position: absolute;
		top: var(--top);
		width: calc(var(--margin-pad) * 2);
		z-index: 1;
		}
	.text-graphic-holder {
		display: grid;
		margin-inline: auto;
		max-width: 128rem;
		position: relative;
		z-index: 2;
		}
	.text-graphic-graphic {
		}
	.text-graphic-image {
		}
	.text-graphic-words {
		background-clip: text;
		-webkit-background-clip: text;
		background-size: cover;
		background-repeat: no-repeat;
		color: rgba(var(--hue-color-rgb), 0.25);
		display: inline-block;
		line-height: 0.8em;
		text-transform: uppercase;
		font-weight: var(--heavy);
		}
	.text-graphic-text {
		display: inline-block;
		line-height: 0.8em;
		}
	.text-graphic-text-2 {
		padding-left: 0.3em;
		}
	.text-graphic-medium {
		font-size: 0.8em;
		}
	.text-graphic-small {
		font-size: 0.7em;
		}
	.text-graphic-info {
		margin-left: calc(var(--margin-pad) + var(--margin-block));
		position: relative;
		text-shadow: 0 0 1rem rgba(var(--hue-white-rgb),0.5), 0 0 2rem rgba(var(--hue-white-rgb),0.25);
		z-index: 2;
		}
	.text-graphic-content {
		font-size: 0.2em;
		font-weight: 800;
		text-transform: uppercase;
		text-wrap: balance;
		}
	@media (min-width: 50em) {
		.text-graphic {
			--size: 16rem;
			--top: calc(var(--size) / 3);
			}
		.text-graphic::after {
			width: 20%;
			}
		.text-graphic-holder {
			grid-template-columns: min-content 1fr;
			}
		.text-graphic-words {
			text-wrap: nowrap;
			margin-bottom: var(--margin-block);
			}
		.text-graphic-info {
			margin-left: -2rem;
			margin-top: calc(var(--size) / 3);
			text-shadow: 0 0 1rem rgba(var(--hue-white-rgb),0.5), 0 0 2rem rgba(var(--hue-white-rgb),0.25);
			}
	}
	@media (min-width: 60em) {
		.text-graphic {
			--size: 20rem;
			}
		.text-graphic::after {
			width: 35%;
			}
		.text-graphic-info {
			max-width: 60rem;
			}
	}
	@media (min-width: 80em) {
		.text-graphic {
			--size: 24rem;
			}
		strong.text-graphic::after {
			-webkit-mask-size: 5rem auto;
			mask-size: 5rem auto;
			}
		.text-graphic-info {
			margin-left: -4rem;
			}
	}