.supt-section-products-innovation {
	margin-top: -50vh;

	height: 400vh;

	&__inner {
		height: 100vh;
		position: sticky;
		top: 0;
	}

	&__products {
		height: 100vh;
		position: sticky;
		top: 0;
	}

	&__product {
		position: relative;

		&.-is-wifi-vision {
			.supt-section-products-innovation__image-wrapper {
				position: relative;
			}
			.supt-section-products-innovation__image {
				opacity: 0;
			}
		}

		&__inner {
			position: absolute;
			inset: 0;
			height: 100vh;

			padding: $spacing-6 0;
			row-gap: $spacing-6;

			overflow: hidden;

			flex-flow: column nowrap;

			@media (min-width: $breakpoint-xs) {
				padding: $spacing-12 0;
			}
			@media (min-width: $breakpoint-sm) {
				padding: $spacing-24 0;
			}
			@media (min-width: $breakpoint-md) {
				height: 100vh;
				flex-flow: row wrap;
			}

			.col-12 {
				flex: none;
				/* @media (min-width: $breakpoint-md) {
					flex: 0 0 100%;
				} */
			}
		}
	}

	&__title,
	&__description {
		color: $color-white;

		opacity: 0;
	}

	&__title {
		@extend %t-h2;
		text-shadow: $text-shadow-glow;

		margin-bottom: 0;
	}

	&__image {
		display: block;
		height: auto;
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
		margin: auto;
		width: var(--supt-innovation-product-mobile-width);

		@media (min-width: $breakpoint-md) {
			width: var(--supt-innovation-product-tablet-width);
		}
		@media (min-width: $breakpoint-lg) {
			width: var(--supt-innovation-product-desktop-width);
		}

		/* For Wifi Vision animation */
		&__zoom {
			position: relative;
			display: block;

			position: absolute;
			inset: 0;

			&__radar {
				display: block;
				position: absolute;
				inset: 0;
				height: 100%;
				margin: auto;

				width: 80px;
				@media (min-width: $breakpoint-md) {
					width: 110px;
				}
				@media (min-width: $breakpoint-lg) {
					width: 142px;
				}

				transform-origin: 50% 15%;
				z-index: 0;
			}

			&__default {
				max-width: 150%;
				max-height: 110%;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				z-index: 1;
			}
		}
	}
	&__description {
		@extend %paragraph-section-text;
	}
}