.supt-section-text-big.-map {
	height: 700vh;

	.supt-section-text-big__inner {
		height: calc(50% + 93px);
		flex-shrink: 0;
	}

	.supt-section-text-big__line-wrapper {
		z-index: 1;
	}

	.supt-section-text-big__map {
		position: absolute;
		z-index: -1;

		svg {
			display: block;
			width: 100%;
			height: auto;
		}

		&__countries {
			stroke-width: 0.3px;
			@media (min-width: $breakpoint-md) {
				stroke-width: 0.5px;
			}
		}

		&__country {
			&.-sweden,
			&.-spain,
			&.-switzerland {
				opacity: 0;
				transition:
					stroke-dashoffset 0.1s ease-in-out 0.5s,
					opacity 0.5s;

				&.-is-glow {
					stroke-dashoffset: 0;
					opacity: 1;

					transition:
						stroke-dashoffset 0.5s ease-in-out,
						opacity 0.1s;
				}
			}

			&.-sweden {
				--supt-innovation-stroke-dasharray-sweden: 960;
				stroke-dasharray: var(--supt-innovation-stroke-dasharray-sweden);
				stroke-dashoffset: var(--supt-innovation-stroke-dasharray-sweden);
			}
			&.-spain {
				--supt-innovation-stroke-dasharray-spain: 520;
				stroke-dasharray: var(--supt-innovation-stroke-dasharray-spain);
				stroke-dashoffset: var(--supt-innovation-stroke-dasharray-spain);
			}
			&.-switzerland {
				--supt-innovation-stroke-dasharray-switzerland: 200;
				stroke-dasharray: var(--supt-innovation-stroke-dasharray-switzerland);
				stroke-dashoffset: var(--supt-innovation-stroke-dasharray-switzerland);
			}
		}

		&__pins {
			position: absolute;
			inset: 0;
		}

		&__pin {
			opacity: 0;
			transform: translateY(-20px);
			transition:
				opacity 0.3s,
				transform 0.3s ease-in-out;

			&.-is-visible {
				opacity: 1;
				transform: translateY(0);
				transition-delay: 0.5s;
			}

			&.-sweden {
				transform: translate(1957.65px, 832px) scale(2) translate(-1957.65px, -832px);
				@media (min-width: $breakpoint-xs) {
					transform: translate(1957.65px, 832px) scale(1.8) translate(-1957.65px, -832px);
				}
				@media (min-width: $breakpoint-sm) {
					transform: translate(1957.65px, 832px) scale(1.5) translate(-1957.65px, -832px);
				}
				@media (min-width: $breakpoint-xl) {
					transform: none;
				}
			}
			&.-spain {
				transform: translate(1495.65px, 1480px) scale(2) translate(-1495.65px, -1480px);
				@media (min-width: $breakpoint-xs) {
					transform: translate(1495.65px, 1480px) scale(1.8) translate(-1495.65px, -1480px);
				}
				@media (min-width: $breakpoint-sm) {
					transform: translate(1495.65px, 1480px) scale(1.5) translate(-1495.65px, -1480px);
				}
				@media (min-width: $breakpoint-xl) {
					transform: none;
				}
			}
			&.-switzerland {
				transform: translate(1769.65px, 1226px) scale(2) translate(-1769.65px, -1226px);
				@media (min-width: $breakpoint-xs) {
					transform: translate(1769.65px, 1226px) scale(1.8) translate(-1769.65px, -1226px);
				}
				@media (min-width: $breakpoint-sm) {
					transform: translate(1769.65px, 1226px) scale(1.5) translate(-1769.65px, -1226px);
				}
				@media (min-width: $breakpoint-xl) {
					transform: none;
				}
			}
		}

		&__cities {
			position: absolute;
			inset: 0;

			.supt-map-infos {
				position: absolute;
				opacity: 0;
				scale: calc(1 / 4); /* Reversed scale of the map which will be scale to 3.6 on mobile */
				translate: 0 -15px;
				transition:
					opacity 0.5s,
					translate 0.5s ease-in-out;

				@media (min-width: $breakpoint-md) {
					scale: calc(
						1 / 2.6
					); /* Reversed scale of the map which will be scale to 2.6 on desktop */
				}

				&.-sweden {
					top: clamp(53px, -41.81px + 29.63vw, 69px);
					left: clamp(175px, -50.19px + 70.37vw, 213px);

					@media (min-width: $breakpoint-xs) {
						top: clamp(69px, -6px + 20vw, 109px);
						left: clamp(214px, 17.13px + 52.5vw, 319px);
					}
					@media (min-width: $breakpoint-sm) {
						top: clamp(112px, 0.42px + 19.37vw, 149px);
						left: clamp(319px, 14.41px + 52.88vw, 420px);
					}
					@media (min-width: $breakpoint-md) {
						top: clamp(98px, -29.43px + 16.59vw, 135px);
						left: clamp(329px, -8.51px + 43.95vw, 427px);
					}
					@media (min-width: $breakpoint-lg) {
						top: clamp(135px, -99.82px + 23.67vw, 184px);
						left: clamp(427px, -162px + 59.38vw, 693px);
					}
					@media (min-width: $breakpoint-xl) {
						top: clamp(189px, -91px + 23.33vw, 245px);
						left: clamp(427px, -162px + 59.38vw, 693px);
					}
				}
				&.-spain {
					top: clamp(125px, -40.93px + 51.85vw, 153px);
					left: clamp(122px, -55.78px + 55.56vw, 152px);

					@media (min-width: $breakpoint-xs) {
						top: clamp(153px, 10.5px + 38vw, 229px);
						left: clamp(153px, 4.88px + 39.5vw, 232px);
					}
					@media (min-width: $breakpoint-sm) {
						top: clamp(232px, 20.9px + 36.65vw, 302px);
						left: clamp(232px, -0.21px + 40.31vw, 309px);
					}
					@media (min-width: $breakpoint-md) {
						top: clamp(225px, -16.08px + 31.39vw, 295px);
						left: clamp(237px, -21.3px + 33.63vw, 312px);
					}
					@media (min-width: $breakpoint-lg) {
						top: clamp(295px, -136.3px + 43.48vw, 385px);
						left: clamp(312px, -135.29px + 45.09vw, 514px);
					}
					@media (min-width: $breakpoint-xl) {
						top: clamp(389px, -141px + 44.17vw, 495px);
						left: clamp(312px, -135.29px + 45.09vw, 514px);
					}
				}
				&.-switzerland {
					top: clamp(97px, -39.3px + 42.59vw, 120px);
					left: clamp(152px, -55.41px + 64.81vw, 187px);

					@media (min-width: $breakpoint-xs) {
						top: clamp(120px, 5.63px + 30.5vw, 181px);
						left: clamp(187px, 8.88px + 47.5vw, 282px);
					}
					@media (min-width: $breakpoint-sm) {
						top: clamp(185px, 13.1px + 29.84vw, 242px);
						left: clamp(282px, 7.57px + 47.64vw, 373px);
					}
					@media (min-width: $breakpoint-md) {
						top: clamp(176px, -20.3px + 25.56vw, 233px);
						left: clamp(290px, -13.07px + 39.46vw, 378px);
					}
					@media (min-width: $breakpoint-lg) {
						top: clamp(233px, -112.04px + 34.78vw, 305px);
						left: clamp(378px, -151.21px + 53.35vw, 617px);
					}
					@media (min-width: $breakpoint-xl) {
						top: clamp(309px, -121px + 35.83vw, 395px);
						left: clamp(378px, -151.21px + 53.35vw, 617px);
					}
				}

				&.-is-visible {
					opacity: 1;
					translate: 0 0;
					transition-delay: 0.6s;
				}
			}
		}
	}

	&.-no-animation {
		height: auto;
		.supt-section-text-big__wrapper {
			height: auto;
		}
		.supt-section-text-big__inner {
			@mixin clamp padding-top, $spacing-8, $spacing-32, $breakpoint-xs, $breakpoint-xl;
			@mixin clamp padding-bottom, $spacing-16, $spacing-32, $breakpoint-xs, $breakpoint-xl;
		}
		.supt-section-text-big__line-wrapper {
			display: none;
		}

		.supt-section-text-big__map {
			position: relative;
			left: -100%;
			width: 220%;

			@media (min-width: $breakpoint-xs) {
				width: 200%;
				left: -80%;
			}
			@media (min-width: $breakpoint-sm) {
				width: 160%;
				/* left: -30%; */
				left: clamp(-390px, -28.59px + -47.12vw, -300px);
			}
			@media (min-width: $breakpoint-md) {
				/* left: 50%; */
				/* transform: translateX(-50%); */
				width: 992px;
				left: clamp(-440px, -853.27px + 53.81vw, -320px);
			}
			@media (min-width: $breakpoint-lg) {
				width: 1200px;
				left: clamp(-450px, -977.15px + 53.14vw, -340px);
			}
			@media (min-width: $breakpoint-xl) {
				width: 1440px;
				left: clamp(-530px, -930px + 33.33vw, -450px);
			}
			@media (min-width: $breakpoint-xxl) {
				width: 2500px;
				left: -115%;
			}

			&__countries {
				stroke-width: 1px;

				path:nth-child(-n + 24),
				path:nth-child(63) {
					display: none;
				}
			}
			&__pin {
				&.-sweden {
					transform: translate(1957.65px, 832px) scale(2.6) translate(-1957.65px, -832px);
					@media (min-width: $breakpoint-sm) {
						transform: translate(1957.65px, 832px) scale(2.3) translate(-1957.65px, -832px);
					}
					@media (min-width: $breakpoint-xxl) {
						transform: translate(1957.65px, 832px) scale(1.8) translate(-1957.65px, -832px);
					}
				}
				&.-spain {
					transform: translate(1495.65px, 1480px) scale(2.6) translate(-1495.65px, -1480px);
					@media (min-width: $breakpoint-sm) {
						transform: translate(1495.65px, 1480px) scale(2.3) translate(-1495.65px, -1480px);
					}
					@media (min-width: $breakpoint-xxl) {
						transform: translate(1495.65px, 1480px) scale(1.8) translate(-1495.65px, -1480px);
					}
				}
				&.-switzerland {
					transform: translate(1769.65px, 1226px) scale(2.6) translate(-1769.65px, -1226px);
					@media (min-width: $breakpoint-sm) {
						transform: translate(1769.65px, 1226px) scale(2.3) translate(-1769.65px, -1226px);
					}
					@media (min-width: $breakpoint-xxl) {
						transform: translate(1769.65px, 1226px) scale(1.8) translate(-1769.65px, -1226px);
					}
				}
			}
			&__cities .supt-map-infos {
				scale: 1;

				&.-sweden {
					left: clamp(410px, -93.7px + 157.41vw, 495px);
					top: clamp(116px, -67.7px + 57.41vw, 147px);

					@media (min-width: $breakpoint-xs) {
						left: clamp(447px, 51.38px + 105.5vw, 658px);
						top: clamp(130px, -10.63px + 37.5vw, 205px);
					}
					@media (min-width: $breakpoint-sm) {
						left: clamp(520px, 37.49px + 83.77vw, 680px);
						top: clamp(155px, -25.94px + 31.41vw, 215px);
					}
					@media (min-width: $breakpoint-md) {
						left: 65.8%;
						top: 35%;
					}
					@media (min-width: $breakpoint-lg) {
						left: 66.7%;
						top: 36%;
					}
					@media (min-width: $breakpoint-xl) {
						left: 67.4%;
						top: 38%;
					}
					@media (min-width: $breakpoint-xxl) {
						left: 69%;
						top: 42.5%;
					}
				}
				&.-spain {
					left: clamp(302px, -83.19px + 120.37vw, 367px);
					top: clamp(265px, -90.56px + 111.11vw, 325px);

					@media (min-width: $breakpoint-xs) {
						left: clamp(330px, 28.13px + 80.5vw, 491px);
						top: clamp(290px, 12.5px + 74vw, 438px);
					}
					@media (min-width: $breakpoint-sm) {
						left: clamp(385px, 14.07px + 64.4vw, 508px);
						top: clamp(340px, -6.81px + 60.21vw, 455px);
					}
					@media (min-width: $breakpoint-md) {
						left: 48.9%;
						top: 75%;
					}
					@media (min-width: $breakpoint-lg) {
						left: 49.8%;
						top: 75.7%;
					}
					@media (min-width: $breakpoint-xl) {
						left: 50.5%;
						top: 77.5%;
					}
					@media (min-width: $breakpoint-xxl) {
						left: 52.2%;
						top: 82.5%;
					}
				}
				&.-switzerland {
					left: clamp(365px, -85.37px + 140.74vw, 441px);
					top: clamp(207px, -89.3px + 92.59vw, 257px);

					@media (min-width: $breakpoint-xs) {
						left: clamp(399px, 46.5px + 94vw, 587px);
						top: clamp(227px, 5.75px + 59vw, 345px);
					}
					@media (min-width: $breakpoint-sm) {
						left: clamp(463px, 25.72px + 75.92vw, 608px);
						top: clamp(270px, -1.41px + 47.12vw, 360px);
					}
					@media (min-width: $breakpoint-md) {
						left: 58.6%;
						top: 59%;
					}
					@media (min-width: $breakpoint-lg) {
						left: 59.6%;
						top: 60%;
					}
					@media (min-width: $breakpoint-xl) {
						left: 60.3%;
						top: 61.5%;
					}
					@media (min-width: $breakpoint-xxl) {
						left: 62.1%;
						top: 66.5%;
					}
				}
			}
		}
	}
}