.ww-gw-hero {
	--container-aspect-ratio: 4 / 5;
	--container-before-content: unset;
	--content-inline-size: 100%;
	--content-font-size: 1rem;
	--content-margin-inline: 35% 0.7rem;
	--heading-font-size: 2rem;
	--heading-line-height: 115%;
	--heading-margin-block: 0 1rem;
	--image-url: var(--mobile-image-url);
	aspect-ratio: var(--container-aspect-ratio);
	width: 100%;
	height: auto;
	position: relative;
	background-image:
		linear-gradient(
			to left,
			rgba(35, 31, 32, 0.95) 0%,
			rgba(255, 255, 255, 0) 80%
		),
		var(--image-url);
	background-size:
		cover,
		280% auto;
	background-position:
		center,
		65% 5%;
	font-family: var(--fonts-montserrat);
	color: var(--colors-white);
	display: flex;
	align-items: center;
}

@media (min-width: 768px) {
	.ww-gw-hero {
		--container-aspect-ratio: 16 / 6;
		--container-before-content: '';
		--content-font-size: 1.3rem;
		--content-inline-size: 60%;
		--content-margin-inline: 55% 0rem;
		--heading-font-size: 2rem;
		--heading-line-height: 100%;
		--heading-margin-block: 0 1.5rem;
		--image-url: var(--desktop-image-url);
		background-image:
			linear-gradient(
				to left,
				rgba(35, 31, 32, 0.95) 0%,
				rgba(255, 255, 255, 0) 60%
			),
			var(--image-url);
		background-size: cover;
		background-position:
			center,
			50% 12%;
	}
}

@media (min-width: 1024px) {
	.ww-gw-hero {
		--heading-font-size: 3.5rem;
		--heading-line-height: 112.5%;
		--heading-margin-block: 0 2rem;
	}
}

.ww-gw-hero .content {
	inline-size: var(--content-inline-size);
	margin-inline: var(--content-margin-inline);
}

.ww-gw-hero h1 {
	font-size: var(--heading-font-size);
	line-height: var(--heading-line-height);

	font-weight: 500;
	text-wrap: balance;
	margin-block: var(--heading-margin-block);
}

.ww-gw-hero p {
	font-size: var(--content-font-size);
	text-transform: uppercase;
	text-wrap: pretty;
}