.timeline-wrapper {
	--faster-timeline-item-transition: 600ms var(--ease-out-expo);
	--timeline-item-transition: 800ms var(--ease-out-expo);
	--timeline-bg: #FFFEFC;
	--timeline-items-bg: #FCF2D2;
	--timeline-text: var(--ink, #000005);
	--timeline-nav-border: #D8D1C1;
	--timeline-nav-dot-active: var(--js-yellow-primary, #fdb835);
	--timeline-nav-dot-inactive: #A1A1A1;
	--timeline-inactive-opacity: 0.24;

	position: relative;
	display: block;
	background: var(--timeline-bg);
	padding-block: 120px 0px;
	padding-inline: 0;
	margin: 0;
	width: 100%;
	max-width: 100vw;

	@media (max-width: 1024px) {
		& {
			padding-block: 100px 0;
		}
	}

	@media (max-width: 767px) {
		& {
			padding-block: 60px 0;
		}
	}

	& .swiper-wrapper {
		transition-timing-function: var(--ease-out-expo) !important;
	}

	& .timeline-intro-section-wrapper {
		position: relative;
		display: block;
		justify-content: stretch;
		align-items: flex-start;
		align-content: flex-start;
		padding: 0;
		background: transparent;

		& .timeline-intro-section {
			position: relative;
			display: flex;
			flex-flow: column nowrap;
			justify-content: flex-start;
			align-items: stretch;
			align-content: stretch;
			text-align: center;
			gap: 24px;
			max-width: 780px;
			padding: 0 80px 50px;
			margin: 0 auto;

			@media (max-width: 1024px) {
				& {
					padding-inline: 50px;
				}
			}

			@media (max-width: 767px) {
				& {
					padding-inline: 20px;
				}
			}

			&>* {
				display: block;
				margin: 0;
				text-align: inherit;

				&.timeline-intro-subtitle {
					display: block;
					color: var(--timeline-text) !important;

					&:not(:last-child) {
						margin-bottom: 10px;
					}
				}

				&.timeline-intro-title {
					color: var(--timeline-text);
				}

				&.timeline-intro-content {
					font-size: 1.1875rem;
					line-height: 1.45;
					font-weight: 400;
					-webkit-font-smoothing: auto;
					color: var(--timeline-text);
					margin-top: -12px;
				}
			}

		}

		& .timeline-rotator-nav-wrapper {
			--nav-item-width: clamp(80px, 7vw, 110px);

			position: relative;
			width: 100%;
			max-width: 100vw;
			overflow-x: clip;
			z-index: 2;
			display: block;

			& .timeline-rotator-nav {
				position: relative;
				display: block;
				padding: 0;
				width: 100%;
				max-width: 100vw;
				border-bottom: solid 1px var(--timeline-nav-border);

				&.swiper {
					overflow: visible;
				}

				& .swiper-wrapper {
					display: flex;
					flex-wrap: nowrap;
					position: relative;
					padding-block: 20px 6px;
					padding-inline: 0;
					height: 82px;

					& * {
						z-index: 10;
					}

					/* &:before {
						position: absolute;
						content: '';
						display: block;
						left: 0;
						bottom: 20px;
						right: 0;
						height: 1px;
						background: var(--timeline-nav-border);
						z-index: 1;
						pointer-events: none;
						opacity: 1;
					} */
				}

				& .timeline-nav-item {
					position: relative;
					display: inline-flex;
					flex-flow: column nowrap;
					justify-content: flex-end;
					align-items: center;
					align-content: center;
					width: var(--nav-item-width) !important;
					cursor: pointer;
					opacity: 1;
					will-change: opacity;
					transition: all var(--timeline-item-transition);

					&:not(.swiper-slide-thumb-active):hover {
						opacity: 1;
					}

					& span {
						display: block;
						width: auto;
						color: var(--timeline-text);
						pointer-events: none;
						transition: all var(--faster-timeline-item-transition);
						will-change: color, font-size;
						text-align: center;
						font-size: 13px;
						line-height: 1.3;
						text-overflow: hidden;
						overflow: clip;
						white-space: nowrap;
						font-family: var(--body-font);
						font-weight: 400;
						letter-spacing: 0;
						transform-origin: center center;
					}

					& .title-upper {
						position: relative;
						z-index: 10;
						opacity: 1;
						text-transform: uppercase;
						font-weight: 400;
						margin-bottom: 12px;
					}

					& .title-lower {
						position: relative;
						z-index: 10;
						opacity: 1;
						font-size: 0 !important;
						line-height: 0;
						height: 0;
						overflow: visible;
						font-weight: 400;
						letter-spacing: 0;

						&::after {
							content: '';
							display: block;
							width: 12px;
							height: 12px;
							border-radius: 50%;
							background: var(--timeline-nav-dot-inactive);
							transition: all var(--faster-timeline-item-transition);
							margin: 0 auto;
						}
					}

					&.swiper-slide-thumb-active {
						opacity: 1.0;

						& .title-upper {
							opacity: 1;
							z-index: 10;
							font-size: 17px;
							font-weight: 700;
						}

						& .title-lower {
							opacity: 1;
							z-index: 10;

							&::after {
								width: 19px;
								height: 19px;
								background: var(--timeline-nav-dot-active);
								margin: -3px auto 0;
							}
						}
					}

				}
			}

		}

	}

	& .timeline-rotator-wrapper {
		position: relative;
		display: block;
		width: 100%;
		max-width: 100vw;
		overflow: clip;
		background: var(--timeline-items-bg);

		& .timeline-rotator {
			position: relative;
			display: block;
			width: 100%;
			max-width: 100vw;

			&.swiper {
				overflow: visible;
			}

			& .swiper-wrapper {
				display: flex;
				flex-flow: row nowrap;
				justify-content: flex-start;
				align-items: stretch;
				align-content: stretch;
			}

			& .timeline-item {
				--mid-gap: 48px;

				position: relative;
				display: inline-flex;
				flex-flow: row nowrap;
				justify-content: stretch;
				align-items: flex-start;
				align-content: center;
				padding: 36px 80px 80px 24px;
				background: transparent;
				transition: all var(--timeline-item-transition);
				will-change: opacity, background;
				opacity: var(--timeline-inactive-opacity, 0.24);
				max-width: 100vw;
				width: 746px;

				&>* {
					z-index: 10;
				}

				&:before {
					position: absolute;
					display: block;
					content: '';
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					background: linear-gradient(180deg, var(--timeline-bg) 0%, var(--timeline-items-bg) 100%);
					transition: opacity var(--timeline-item-transition);
					will-change: opacity;
					pointer-events: none;
					z-index: 1;
					opacity: 0;
				}

				&:after {
					display: none !important;
				}

				@media (max-width: 1500px) {
					& {
						width: 746px;
						max-width: 85vw;
					}
				}

				@media (max-width: 850px) {
					& {
						--mid-gap: 24px;
						flex-flow: column nowrap;
						justify-content: flex-start;
						align-items: stretch;
						align-content: stretch;
						padding: 40px 24px 50px;
					}
				}

				@media (max-width: 767px) {
					& {
						width: 85vw;
						padding: 30px 20px 40px;
					}
				}

				&:not(.swiper-slide-active):hover {
					opacity: 0.5;
				}

				&.swiper-slide-active {
					opacity: 1.0;

					&:before {
						opacity: 1;
					}
				}

				& .timeline-item-image {
					position: relative;
					display: block;
					aspect-ratio: 1.31;
					width: calc(50% - var(--mid-gap));
					border-radius: 3px;
					overflow: hidden;

					@media (max-width: 850px) {
						& {
							width: 100%;
						}
					}

					& img {
						position: absolute;
						display: block;
						width: 100%;
						height: 100%;
						object-fit: cover;
						object-position: center top;
					}
				}

				& .timeline-item-details {
					position: relative;
					display: block;
					width: calc(50% + var(--mid-gap));
					padding: 0 0 var(--mid-gap) var(--mid-gap);

					@media (max-width: 850px) {
						& {
							width: 100%;
							padding: var(--mid-gap) 0 0 0;
						}
					}

					& .timeline-item-title {
						margin-bottom: 10px;
						margin-top: 0;
						color: var(--timeline-text);
					}

					& .timeline-item-content {
						& p {
							font-size: clamp(1.0rem, 1.6vw, 1.1875rem);
							line-height: 1.45;
							font-weight: 400;
							-webkit-font-smoothing: auto;
							color: var(--timeline-text);
						}
					}
				}

			}
		}
	}

	&.wider-intro {
		& .timeline-intro-section-wrapper {
			& .timeline-intro-section {
				max-width: 930px;
			}
		}
	}

	&.condense-nav {
		padding-block: 120px;

		@media (max-width: 1024px) {
			& {
				padding-block: 100px;
			}
		}

		@media (max-width: 767px) {
			& {
				padding-block: 80px;
			}
		}

		& .timeline-intro-section-wrapper {
			& .timeline-rotator-nav-wrapper {
				--nav-item-width: 121px;

				& .timeline-rotator-nav {
					& .swiper-wrapper {
						&:before {
							background: var(--timeline-nav-border);
							height: 1px;
						}
					}

					& .timeline-nav-item {
						& .title-lower {
							text-transform: uppercase;
						}

						&.swiper-slide-thumb-active {
							& .title-upper {
								font-size: 1.25rem;
							}
						}
					}
				}
			}
		}

	}

}