.supt-hero-innovation {
	height: 110vh;
	position: relative;
	background-color: black;

	&__wrapper {
		position: sticky;
		top: 0;
		height: 100svh;
		overflow: hidden;
	}

	.container {
		height: 100%;
		display: flex;
		align-items: flex-end;
		padding-top: 69px;
		padding-bottom: $spacing-40;
		@media (min-width: $breakpoint-md) {
			align-items: center;
			padding-bottom: 0;
		}
		@media (min-width: $breakpoint-lg) {
			padding-top: 81px;
		}
	}

	&__content {
		position: relative;
		z-index: 2;

		padding-top: 40px;
		@media (min-width: $breakpoint-xs) {
			padding-top: 60px;
		}
		@media (min-width: $breakpoint-md) {
			padding-top: 0;
		}

		h1 {
			@extend %t-h1;
			color: $color-white;
			@mixin clamp margin-bottom, $spacing-4, $spacing-6, $breakpoint-xs, $breakpoint-xl;
		}
		p {
			@extend %t-body-m;
			color: $color-white;
		}
	}

	&__background {
		position: absolute;
		inset: 0 -500px; /* We need to add some extra space to the left and right to avoid the images to be cut off (bug in Firefox and Safari) */
		transform-origin: bottom;
		transform: scale(1.1) translateY(10%);
		@media (min-width: $breakpoint-md) {
			transform: scale(1.1) translateY(0%);
			inset: 0 -300px; /* We need to add some extra space to the left and right to avoid the images to be cut off (bug in Firefox and Safari) */
		}
		@media (min-width: $breakpoint-lg) {
			inset: 0 -200px; /* We need to add some extra space to the left and right to avoid the images to be cut off (bug in Firefox and Safari) */
		}

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 160px;
			background: linear-gradient(180deg, rgba(1, 1, 1, 0) 0%, #000 100%);
			z-index: 1;
		}

		&__inner {
			position: absolute;
			inset: 0;

			@media (min-width: $breakpoint-md) {
				transform: translate(-20%, 0%);
			}
			@media (min-width: $breakpoint-lg) {
				transform: translate(-10%, 0%);
			}
			@media (min-width: $breakpoint-xl) {
				transform: none;
			}
		}

		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			overflow: visible;
		}

		&__glow {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			aspect-ratio: 1440 / 850;

			overflow: visible;

			z-index: 2;

			&__center {
				stroke-dasharray: 310;
				stroke-dashoffset: 310;
			}
			&__star {
				stroke-dasharray: 570;
				stroke-dashoffset: 570;
			}
			&__line {
				stroke-dasharray: 370;
				stroke-dashoffset: 370;
			}
		}
	}
}