.supt-section-history {
	@mixin clamp padding-block, $spacing-16, $spacing-32, $breakpoint-xs, $breakpoint-xl;
	color: white;
	overflow: hidden;
	height: 100vh;

	> .container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	&__title {
		@extend %t-h2;
		text-align: center;
		margin-bottom: $spacing-8;
	}

	/* Navigation container */
	&__navigation {
		@mixin clamp gap, $spacing-5, $spacing-10, $breakpoint-xs, $breakpoint-xl;
		display: flex;
		align-items: center;
		position: relative;
	}

	/* Navigation buttons */
	&__prev,
	&__next {
		@media (min-width: $breakpoint-md) {
			position: static;
		}

		.supt-button__wrapper {
			box-shadow:
				8px 8px 16px 0px rgba(102, 0, 14, 0.3),
				8px -8px 16px 0px rgba(233, 53, 89, 0.4);
		}
		&:has(.supt-button__link[disabled]) {
			opacity: 0.5;
			pointer-events: none;
		}
	}

	&__prev {
		@media (min-width: $breakpoint-md) {
			left: auto;
		}

		.supt-icon-chevron {
			rotate: 90deg;
			translate: 0px 1px;
		}
	}

	&__next {
		@media (min-width: $breakpoint-md) {
			right: auto;
		}

		.supt-icon-chevron {
			rotate: -90deg;
			translate: 1px 1px;
		}
	}

	/* Arrow icon sizing */
	&__arrow-icon {
		width: 2.625rem;
		height: 2.625rem;
		color: white;

		@media (min-width: $breakpoint-md) {
			width: 2.875rem;
			height: 2.875rem;
		}

		@media (min-width: 992px) {
			width: 3.125rem;
			height: 3.125rem;
		}
	}

	/* Slider styles */
	&__slider {
		width: 100%;
	}

	/* Slide styles */
	&__slide {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* Year typography */
	&__year {
		@extend %t-h1;
		@mixin clamp font-size, 58, 95, $breakpoint-xs, $breakpoint-xl;
		display: block;
		text-align: center;

		font-weight: 400;
		line-height: 1.2;
	}

	/* Cards container */
	&__cards {
		position: relative;
		height: 100%;

		&__row {
			position: absolute;
			top: 15%;
			left: 0;
			right: 0;
			gap: $spacing-4;

			pointer-events: none;

			@media (min-width: $breakpoint-md) {
				column-gap: unset;

				top: 50%;
				transform: translateY(-50%);
			}
		}
	}

	&__card {
		opacity: 0;
		pointer-events: none;

		&.-active {
			pointer-events: auto;
		}
	}

	.supt-card-keyfact {
		z-index: 1;
		&__title {
			@mixin clamp font-size, 18, 24, $breakpoint-xs, $breakpoint-xl;
		}
	}

	.swiper-slide {
		width: auto;
		position: relative;
		display: flex;
		justify-content: center;
		transition: transform 0.3s ease;

		time {
			cursor: pointer;
			opacity: 0.32;
			text-shadow: $text-shadow-glow;

			transform: scale(0.5);
			transition:
				transform 0.3s,
				opacity 0.3s;

			@media (min-width: $breakpoint-md) {
				transform: scale(0.4);
			}
		}

		&.swiper-slide-active {
			time {
				opacity: 1;
				transform: scale(1);
			}
		}
		&:has(+ .swiper-slide-prev) {
			time {
				@media (min-width: 992px) {
					transform-origin: 30% 50%;
				}
			}
		}
		&.swiper-slide-prev {
			time {
				transform-origin: 20% 50%;
				@media (min-width: 992px) {
					transform-origin: 10% 50%;
				}
			}
		}
		&.swiper-slide-next {
			time {
				transform-origin: 80% 50%;
				@media (min-width: 992px) {
					transform-origin: 90% 50%;
				}
			}

			& + .swiper-slide {
				time {
					@media (min-width: 992px) {
						transform-origin: 70% 50%;
					}
				}
			}
		}
	}

	&.-with-image {
		padding-top: 0;

		&,
		> .container,
		.supt-section-history__cards {
			height: auto;
		}

		.supt-card-keyfact__inner {
			justify-content: space-between;
		}

		.supt-section-history__cards__row {
			&:first-child {
				position: relative;
				transform: none;
			}
		}

		.supt-section-history__cards {
			padding-top: $spacing-16;
		}
	}
}