.supt-section-manifesto {
	background-color: $color-grey-background;
	@media (min-width: $breakpoint-md) {
		margin-top: -100vh;
	}

	position: relative;

	.container,
	.row {
		height: 100%;
	}

	/* Common */
	&__common {
		position: sticky;
		top: 0;
		@media (min-width: $breakpoint-md) {
			margin-bottom: 100vh;
		}

		&__inner {
			position: absolute;
			inset: 0;

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

			padding: $spacing-8 0 $spacing-6;

			background-color: $color-grey-background;
			z-index: 1;

			display: none;

			@media (min-width: $breakpoint-md) {
				height: 100vh;
				padding: 0;
				background: none;

				display: flex;
			}
		}

		.supt-section-manifesto__images {
			display: none;
			@media (min-width: $breakpoint-md) {
				display: block;
			}
		}
		.supt-section-manifesto__image {
			clip-path: inset(100% 0 0 0);
			&:not(:first-child) {
				position: absolute;
				inset: 0;
			}
			/* Initial state */
			&:first-child {
				clip-path: inset(0 0 0 0);
			}
		}
	}

	.supt-line {
		position: absolute;
		transform-origin: bottom;
		z-index: 1;

		--line-xs-width: 100%;
		--line-xs-height: 1px;
		--line-md-width: 1px;
		--line-md-height: 100%;

		/* &.-glow {
			inset: 0;
		} */

		&__inner {
			transform: scaleX(0);
			transform-origin: left;

			@media (min-width: $breakpoint-md) {
				transform: scaleY(0);
				transform-origin: top;
			}
		}
	}

	&__badge-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	&__badge {
		padding: 18px 16px 16px 18px;

		border-radius: 9999px;
		background: $color-grey-background;
		/* box-shadow:
			8px 8px 16px 0px $color-grey-1,
			-8px -8px 16px 0px $color-white; */

		box-shadow:
			8px 8px 16px 0px rgba(0, 0, 0, 0.3),
			-8px -8px 16px 0px rgba(255, 255, 255, 0.5);

		position: relative;
		z-index: 1;

		&__inner {
			width: 80px;
			height: 80px;
			padding: 0px 2px 3px 0px;
			display: flex;
			align-items: center;
			justify-content: center;

			border-radius: 9999px;
			background: $color-grey-background;

			position: relative;

			box-shadow:
				-1px -1px 0px 0px $color-white inset,
				-2px -2px 2px 0px $color-grey-2 inset,
				-1px -1px 0px 0px $color-white,
				-2px -2px 2px 0px $color-grey-2;
		}

		&__number {
			@extend %t-body-s;
			line-height: 21px;
			color: $color-grey-5;

			display: flex;
			height: 21px;
			overflow: hidden;
		}

		&__numbers {
			display: flex;
			flex-direction: column;
		}

		&__stroke {
			position: absolute;
			top: -2px;
			left: -2px;
			width: calc(100% + 2px);
			height: calc(100% + 2px);
			stroke-dasharray: 260;
			stroke-dashoffset: 260;
		}
	}

	/* Images */
	&__images {
		position: absolute;
		top: 0;
		right: 0;
		width: 50%;
		height: 100%;
	}
	&__image {
		/* aspect-ratio: 1/1; */
		overflow: hidden;
		height: 100%;

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

	/* Steps */
	&__steps {
		@mixin clamp --step-padding-y, $spacing-8, $spacing-32, $breakpoint-xs, $breakpoint-xl;
	}
	&__step {
		position: relative;
		padding: var(--step-padding-y) 0;
		@media (min-width: $breakpoint-md) {
			height: 100vh;
		}

		.supt-section-manifesto__image {
			margin-top: $spacing-8;
			@media (min-width: $breakpoint-md) {
				display: none;
			}
		}
	}

	&__content {
		@media (min-width: $breakpoint-md) {
			padding-right: $spacing-8;
		}
	}

	&__number,
	&__heading {
		@extend %t-h2;
		font-weight: 500;
		margin: 0;
	}

	&__title {
		display: flex;
		align-items: center;
		gap: $spacing-4;
	}

	&__number,
	&__heading {
		color: $color-main;
	}

	&__subtitle {
		@extend %t-h4;
		font-weight: 500;
		color: $color-black;
		margin-top: $spacing-2;
	}

	&__text {
		margin-top: $spacing-8;
		display: flex;
		flex-direction: column;
		gap: $spacing-2;

		@media (min-width: $breakpoint-md) {
			margin-top: $spacing-9;
			gap: $spacing-3;
		}
		@media (min-width: $breakpoint-lg) {
			margin-top: $spacing-10;
			gap: $spacing-4;
		}

		p {
			@extend %paragraph-section-text;
			color: $color-grey-5;
		}
		ul {
			@extend %list-section-text;
			list-style: disc;
			padding-left: $spacing-4;

			li {
				/* margin-top: $spacing-2; */
			}
		}
	}

	&.-dark {
		background: none;

		.supt-section-manifesto__heading,
		.supt-section-manifesto__number,
		.supt-section-manifesto__text p,
		.supt-section-manifesto__text ul li {
			color: $color-white;
		}

		.supt-section-manifesto__subtitle {
			color: rgba(255, 255, 255, 0.6);
		}

		.supt-section-manifesto__badge {
			background-color: $color-medium;
			box-shadow:
				8px 8px 16px 0 rgba(102, 0, 14, 0.3),
				-8px -8px 16px 0 rgba(233, 53, 89, 0.4);

			&__inner {
				background: $color-medium;

				box-shadow:
					-1px -1px 0 0 #eb2f54 inset,
					-2px -2px 2px 0 rgba(63, 0, 11, 0.8) inset,
					-1px -1px 0 0 #eb2f54,
					-2px -2px 2px 0 rgba(102, 0, 14, 0.8);
			}
			&__number {
				color: $color-white;
			}
			&__stroke {
				width: 210px;
				height: 210px;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
}