.supt-section-keyfacts {
	background-color: $color-grey-background;
	height: 350vh;
	position: relative;
	@mixin clamp padding-top, $spacing-8, $spacing-16, $breakpoint-xs, $breakpoint-xl;

	@media (max-width: calc($breakpoint-sm - 1px)) {
		padding-inline: $spacing-1;
	}

	&__wrapper {
		height: 100vh;

		position: sticky;
		padding-top: $spacing-8;
		top: 70px;
		@media (min-width: $breakpoint-md) {
			top: 82px;
		}
	}

	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
		@mixin clamp gap, $spacing-8, $spacing-16, $breakpoint-xs, $breakpoint-xl;
	}

	&__head {
		h1,
		h2,
		h3,
		h4 {
			@extend %t-h2;
			margin: 0;
			text-align: center;
		}
	}

	&__description {
		@extend %t-body-sm;
		margin-top: $spacing-4;
		text-align: center;
	}

	&__body {
		position: relative;
		height: 100%;

		@media (max-width: calc($breakpoint-md - 1px)) {
			display: flex;
			flex-direction: column;
			gap: $spacing-4;
			padding-top: $spacing-8;
		}

		.supt-line {
			&:first-child {
				--line-xs-width: 1px;
				--line-xs-height: 100%;
				--line-md-width: 1px;
				--line-md-height: 100%;

				position: absolute;
				top: 0;
				left: calc(50% - 0.5px);

				.supt-line__inner {
					transform: scaleY(0);
					transform-origin: top;
				}

				&.-glow {
					left: 0;
				}
			}

			&:last-child {
				--line-xs-width: 100%;
				--line-xs-height: 1px;
				--line-md-width: 100%;
				--line-md-height: 1px;

				position: absolute;
				bottom: 0;
				left: 0;

				.supt-line__inner {
					transform: scaleX(0);
				}
			}
		}
	}

	&__cards {
		position: absolute;
		inset: 0;
		padding-top: 37.5vh;
	}

	&__card {
		width: 100%;
		position: sticky;

		height: 75vh;
		top: 25vh;
		padding-top: 17.5vh;

		top: calc(25vh + 70px);
		@media (min-width: $breakpoint-md) {
			top: calc(25vh + 82px);
		}
	}

	&.-dark {
		background: none; /* Coming from body background */

		.supt-section-keyfacts__head {
			h1,
			h2,
			h3,
			h4 {
				color: $color-white;
			}
		}

		.supt-section-keyfacts__description {
			color: $color-white;
		}
	}

	& + .supt-section-logoboard {
		.supt-section-logoboard__head {
			h1,
			h2,
			h3,
			h4 {
				border-top: 0;
			}
		}
	}

	& + .supt-section-cards {
		@mixin clamp padding-top, $spacing-16, $spacing-32, $breakpoint-xs, $breakpoint-xl;
	}
}