.supt-section-highlights {
	background-color: $color-grey-background;
	@mixin clamp padding-block, $spacing-16, $spacing-32, $breakpoint-xs, $breakpoint-xl;

	&__title {
		@extend %t-h3;
		color: $color-black;
		text-align: center;
	}

	&__products {
		padding-top: $spacing-16;
		@media (min-width: $breakpoint-md) {
			height: 350vh;
		}

		&__inner {
			@media (min-width: $breakpoint-md) {
				position: sticky;
				top: 0;
				height: 100vh;

				display: flex;
				align-items: center;
				justify-content: center;

				/* Navigation offset */
				padding-top: 80px;
			}
		}
	}

	&__product {
		display: grid;
		grid-template:
			'main main'
			'feature-1 feature-2'
			'feature-3 feature-4';

		gap: 15px;

		@media (min-width: $breakpoint-md) {
			@mixin clamp height, 450px, 750px, $breakpoint-xs, $breakpoint-xl;
			/* area column / rows */
			grid-template:
				'feature-1 main feature-2' 1fr
				'feature-3 main feature-4' 1fr
				/ 1fr 1fr 1fr;

			position: absolute;
			left: 0;
			width: 100%;
		}
		@media (min-width: $breakpoint-lg) {
			gap: 30px;
		}

		&__image-wrapper,
		&__feature__image-wrapper {
			position: absolute;
			inset: 0;
			z-index: 0;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		&__main,
		&__feature {
			position: relative;
			border-radius: 24px;
			overflow: hidden;

			&::after {
				content: '';
				position: absolute;
				inset: 0;
				background: rgba(0, 0, 0, 0.5);
				z-index: 1;
			}
		}

		&__main {
			@mixin clamp height, 450px, 750px, $breakpoint-xs, $breakpoint-xl;
			grid-area: main;

			@media (min-width: $breakpoint-md) {
				height: 100%;
			}

			&::after {
				background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
			}

			.supt-section-highlights__product__content {
				@mixin clamp padding-inline, $spacing-4, $spacing-8, $breakpoint-xs, $breakpoint-xl;
				padding-top: $spacing-14;
			}
		}

		&__content {
			@mixin clamp gap, 8px, 24px, $breakpoint-xs, $breakpoint-xl;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;

			position: relative;
			z-index: 2;
		}

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

		&__title {
			@extend %t-h2;
			@mixin clamp font-size, 22, 32, $breakpoint-xs, $breakpoint-xl;
			@mixin clamp line-height, 24, 36, $breakpoint-xs, $breakpoint-xl;
			margin: 0;
		}

		&__description {
			@extend %t-body-s;
		}

		&__feature {
			/* Start at 2, as the __main is the first child */
			&:nth-child(2) {
				grid-area: feature-1;
			}
			&:nth-child(3) {
				grid-area: feature-2;
			}
			&:nth-child(4) {
				grid-area: feature-3;
			}
			&:nth-child(5) {
				grid-area: feature-4;
			}

			.supt-section-highlights__product__content {
				@mixin clamp padding-inline, $spacing-4, $spacing-10, $breakpoint-xs, $breakpoint-xl;
				@mixin clamp padding-block, $spacing-7, $spacing-10, $breakpoint-xs, $breakpoint-xl;
				height: 100%;
			}

			&__title {
				@extend %t-h4;
				color: $color-black;
				text-align: center;
				margin-bottom: 0;

				@media (min-width: $breakpoint-md) {
					padding: 0 $spacing-10;
				}
			}

			&__icon {
				overflow: hidden;

				&__inner {
					display: block;
					padding: 8px;
				}

				svg {
					display: block;
					width: 48px;
					height: 48px;
					@media (min-width: $breakpoint-md) {
						width: 60px;
						height: 60px;
					}
				}
			}

			/* Button wrapper for the icon variant */
			.supt-button__wrapper {
				position: absolute;
				inset: 0;
				z-index: -1;
				border-radius: 24px;
				box-shadow: none;
				padding: 16px;
			}
			.supt-button__inner {
				height: 100%;
			}
			.supt-button__inner,
			.supt-button__mask,
			.supt-button__mask__inner {
				border-radius: 16px;
			}

			&.-image {
				.supt-section-highlights__product__feature__title {
					color: $color-white;
				}
			}

			&.-icon {
				box-shadow:
					8px 8px 16px 0 $color-grey-1,
					-8px -8px 16px 0 $color-white;
			}
		}

		&__main,
		&__feature.-image {
			@media (min-width: $breakpoint-md) {
				clip-path: inset(0 0 0 100%);
			}
		}
		&__feature.-icon {
			@media (min-width: $breakpoint-md) {
				opacity: 0;
			}
		}

		&:nth-child(1) {
			.supt-section-highlights__product__image {
				object-position: bottom;
			}
		}

		&:not(:first-child) {
			padding-top: $spacing-16;
			@media (min-width: $breakpoint-md) {
				padding-top: 0;
			}
		}
	}
}