.timeline-layout {
	overflow: hidden;
}

.timeline-layout .content-col .pk-text {
	font-size: var(--desktop-body-lg);
	margin-top: max(1rem, calc(1 * var(--su)));
}

.timeline-layout .slider-col {
	margin-top: max(2rem, calc(3 * var(--su)));
}
.timeline-layout .swiper-container {
	overflow: visible;
}

.timeline-layout .swiper-container .swiper-slide {
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	background-color: var(--secondary-blue);
	color: #ffffff;
	font-size: var(--desktop-body-sm);
	padding: max(1.5rem, calc(2 * var(--su)));
}

.timeline-layout .swiper-slide .timeline-counter,
.timeline-layout .swiper-slide .kennis-label {
	margin-bottom: auto;
}
.timeline-layout .swiper-slide .timeline-counter {
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(2.5rem, calc(2.5 * var(--su)));
	height: max(2.5rem, calc(2.5 * var(--su)));
	font-size: var(--desktop-body-sm);
	font-weight: 800;
	background-color: var(--secondary-midnight);
}
.timeline-layout .swiper-slide .timeline-item-year {
	padding: 0.5em 1.25em;
	line-height: 1.5;
	font-weight: 800;
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 100px;
	width: fit-content;
	margin-bottom: 1em;
}

.timeline-layout .swiper-progress {
	max-width: 45%;
	margin-inline: auto;
	position: relative; height: 1px; margin-top: 2rem;
	background-color: rgba(0, 0, 0, 0.4);
}
.timeline-layout .swiper-progress-bar {
	position: absolute; left: 0; top: 0; z-index: 2;
	height: 1px; background-color: rgba(0, 0, 0, 1);
	width: 5%;
}