.sw-mt-timeline,
.sw-mt-timeline * {
	box-sizing: border-box;
}

.sw-mt-timeline {
	--sw-mt-timeline-gap: 72px;
	--sw-mt-timeline-cols: 0.42fr minmax(0, 1fr);
	--sw-mt-timeline-rail: #e6e2db;
	--sw-mt-timeline-progress-color: #1f3a5f;
	--sw-mt-timeline-progress: 0%;
	--sw-mt-timeline-marker-size: 44px;
	--sw-mt-timeline-marker-bg: #ffffff;
	--sw-mt-timeline-marker-color: #1f3a5f;
	--sw-mt-timeline-marker-active-bg: #1f3a5f;
	--sw-mt-timeline-marker-active-color: #ffffff;
	--sw-mt-timeline-divider: #e7e5e1;
	--sw-mt-timeline-rail-gap: 28px;
	--sw-mt-timeline-image-radius: 0;
	--sw-mt-timeline-image-ratio: auto;
	--sw-mt-timeline-image-fit: cover;
	position: relative;
	isolation: isolate;
	width: 100%;
	font-family: inherit;
	color: #1f3a5f;
}

.sw-mt-timeline__rail {
	position: absolute;
	z-index: 0;
	top: calc(var(--sw-mt-timeline-marker-size) / 2);
	bottom: calc(var(--sw-mt-timeline-marker-size) / 2);
	left: calc(var(--sw-mt-timeline-marker-size) / 2);
	width: 2px;
	transform: translateX(-50%);
	pointer-events: none;
}

.sw-mt-timeline:not(.sw-mt-timeline--markers) .sw-mt-timeline__rail {
	display: none;
}

.sw-mt-timeline__rail-track,
.sw-mt-timeline__rail-progress {
	position: absolute;
	inset: 0;
	border-radius: 999px;
}

.sw-mt-timeline__rail-track {
	background: var(--sw-mt-timeline-rail);
}

.sw-mt-timeline__rail-progress {
	background: var(--sw-mt-timeline-progress-color);
	transform-origin: top center;
	transform: scaleY(0);
	transition: transform 80ms linear;
}

.sw-mt-timeline--progress .sw-mt-timeline__rail-progress {
	transform: scaleY(var(--sw-mt-timeline-progress-scale, 0));
}

.sw-mt-timeline__list {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--sw-mt-timeline-gap);
}

.sw-mt-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: var(--sw-mt-timeline-marker-size) minmax(0, 1fr);
	column-gap: var(--sw-mt-timeline-rail-gap);
	align-items: start;
}

.sw-mt-timeline:not(.sw-mt-timeline--markers) .sw-mt-timeline__item {
	grid-template-columns: minmax(0, 1fr);
}

.sw-mt-timeline__marker {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	width: var(--sw-mt-timeline-marker-size);
	height: var(--sw-mt-timeline-marker-size);
	border: 2px solid var(--sw-mt-timeline-progress-color);
	border-radius: 50%;
	background: var(--sw-mt-timeline-marker-bg);
	color: var(--sw-mt-timeline-marker-color);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	box-shadow: 0 0 0 6px #fff;
	transition:
		background-color 280ms ease,
		color 280ms ease,
		border-color 280ms ease,
		transform 280ms ease;
}

.sw-mt-timeline__marker.is-active {
	background: var(--sw-mt-timeline-marker-active-bg);
	color: var(--sw-mt-timeline-marker-active-color);
	border-color: var(--sw-mt-timeline-marker-active-bg);
	transform: scale(1.05);
}

.sw-mt-timeline__grid {
	display: grid;
	grid-template-columns: var(--sw-mt-timeline-cols);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
	min-width: 0;
	padding-top: 4px;
}

.sw-mt-timeline__item--cols-50-50 .sw-mt-timeline__grid {
	--sw-mt-timeline-cols: 1fr 1fr;
}

.sw-mt-timeline__item--cols-60-40 .sw-mt-timeline__grid {
	--sw-mt-timeline-cols: 1.5fr 1fr;
}

.sw-mt-timeline__item--cols-65-35 .sw-mt-timeline__grid {
	--sw-mt-timeline-cols: 1.85fr 1fr;
}

.sw-mt-timeline__item--cols-70-30 .sw-mt-timeline__grid {
	--sw-mt-timeline-cols: 2.33fr 1fr;
}

.sw-mt-timeline__main {
	min-width: 0;
}

.sw-mt-timeline__eyebrow {
	margin: 0 0 10px;
	color: #8b9098;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.sw-mt-timeline__title {
	margin: 0 0 14px;
	color: #1f3a5f;
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.sw-mt-timeline__role {
	margin: 0 0 18px;
	color: #6b7280;
	font-size: 16px;
	line-height: 1.55;
}

.sw-mt-timeline__lesson {
	margin: 0;
	padding: 0;
	border: 0;
	color: #c08b5c;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.45;
}

.sw-mt-timeline__aside {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.sw-mt-timeline__aside--image {
	overflow: hidden;
	border-radius: var(--sw-mt-timeline-image-radius);
	aspect-ratio: var(--sw-mt-timeline-image-ratio);
}

.sw-mt-timeline__aside-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--sw-mt-timeline-image-fit);
	border-radius: var(--sw-mt-timeline-image-radius);
}

.sw-mt-timeline__list-item {
	margin: 0;
	padding: 18px 0;
	border-bottom: 1px solid var(--sw-mt-timeline-divider);
	color: #5f676f;
	font-size: 16px;
	line-height: 1.5;
}

.sw-mt-timeline__list-item:first-child {
	padding-top: 6px;
}

.sw-mt-timeline__list-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.sw-mt-timeline__item.is-inview .sw-mt-timeline__main,
.sw-mt-timeline__item.is-inview .sw-mt-timeline__aside {
	animation: swMtTimelineIn 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.sw-mt-timeline__item.is-inview .sw-mt-timeline__aside {
	animation-delay: 120ms;
}

.sw-mt-timeline__item:not(.is-inview) .sw-mt-timeline__main,
.sw-mt-timeline__item:not(.is-inview) .sw-mt-timeline__aside {
	opacity: 0;
	filter: blur(12px);
	transform: translate3d(-24px, 0, 0);
}

@keyframes swMtTimelineIn {
	from {
		opacity: 0;
		filter: blur(12px);
		transform: translate3d(-24px, 0, 0);
	}
	to {
		opacity: 1;
		filter: blur(0);
		transform: translate3d(0, 0, 0);
	}
}

@media (max-width: 900px) {
	.sw-mt-timeline {
		--sw-mt-timeline-gap: 56px;
		--sw-mt-timeline-rail-gap: 18px;
		--sw-mt-timeline-cols: minmax(0, 1fr);
	}

	.sw-mt-timeline__grid,
	.sw-mt-timeline__item--cols-50-50 .sw-mt-timeline__grid,
	.sw-mt-timeline__item--cols-60-40 .sw-mt-timeline__grid,
	.sw-mt-timeline__item--cols-65-35 .sw-mt-timeline__grid,
	.sw-mt-timeline__item--cols-70-30 .sw-mt-timeline__grid {
		--sw-mt-timeline-cols: minmax(0, 1fr);
		gap: 18px;
	}

	.sw-mt-timeline__title {
		font-size: clamp(26px, 8vw, 34px);
	}

	.sw-mt-timeline__list-item {
		padding: 14px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sw-mt-timeline__rail-progress,
	.sw-mt-timeline__marker,
	.sw-mt-timeline__item.is-inview .sw-mt-timeline__main,
	.sw-mt-timeline__item.is-inview .sw-mt-timeline__aside {
		transition: none !important;
		animation: none !important;
	}

	.sw-mt-timeline__item:not(.is-inview) .sw-mt-timeline__main,
	.sw-mt-timeline__item:not(.is-inview) .sw-mt-timeline__aside {
		opacity: 1;
		filter: none;
		transform: none;
	}
}
