.dreht {
	--dreht-ink: #464752;
	--dreht-year-size: clamp(3.1rem, 5.1vw, 5.5rem);
	--dreht-year-height: clamp(2.635rem, 4.335vw, 4.675rem);
	--dreht-content-gap: 1.45rem;
	overflow-x: hidden;
	padding: 32px 0;
	cursor: default;
	font-family: inherit;
	scrollbar-color: var(--theme-color1, #cb935d) rgba(70, 71, 82, .22);
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.dreht::-webkit-scrollbar {
	height: 10px;
}

.dreht::-webkit-scrollbar-track {
	border-radius: 999px;
	background: rgba(70, 71, 82, .22);
}

.dreht::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: var(--theme-color1, #cb935d);
}

.dreht.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.dreht__track {
	display: flex;
	align-items: stretch;
	/* All six registered milestones fit in the desktop viewport without horizontal scrolling. */
	min-width: 100%;
	padding: 12px 0;
}

.dreht__item {
	position: relative;
	/* Six milestones share the desktop width exactly. */
	flex: 1 0 0;
	min-width: 0;
	min-height: 560px;
	--dreht-item-color: #f6a100;
}

.dreht__rail {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	z-index: 2;
	height: 25px;
	transform: translateY(-50%);
	background: var(--dreht-item-color);
	box-shadow: 0 13px 19px rgba(21, 25, 42, .2);
}

.dreht__connector {
	position: absolute;
	left: 18px;
	z-index: 1;
	width: 2px;
	background: var(--dreht-ink);
}

.dreht__connector::before {
	position: absolute;
	left: 50%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--dreht-ink);
	content: '';
	transform: translateX(-50%);
}

.dreht__item--top .dreht__connector {
	top: 25px;
	bottom: calc(50% + 13px);
}

.dreht__item--top .dreht__connector::before {
	top: -1px;
}

.dreht__item--bottom .dreht__connector {
	top: calc(50% + 13px);
	bottom: 25px;
}

.dreht__item--bottom .dreht__connector::before {
	bottom: -1px;
}

.dreht__content {
	position: absolute;
	/* Clear the connector dot while preserving room for a single-line title. */
	left: clamp(38px, 3vw, 48px);
	width: calc(100% - clamp(54px, 5vw, 76px));
	overflow: hidden;
	color: var(--dreht-ink);
}

.dreht__item--top .dreht__content {
	top: 18px;
	/* Match the text area available to items below the timeline rail. */
	bottom: calc(50% + 135px);
}

.dreht__item--bottom .dreht__content {
	top: calc(50% + 135px);
	bottom: 18px;
}

.dreht__title {
	margin: 0 0 16px;
	color: var(--dreht-ink);
	font-family: inherit;
	font-size: clamp(1.65rem, 2vw, 2.2rem);
	font-weight: 800;
	letter-spacing: .01em;
	line-height: 1.04;
	text-transform: uppercase;
}

.dreht__description,
.dreht__description p {
	margin: 0;
	color: var(--dreht-ink);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.45;
}

.dreht__description p + p {
	margin-top: .85em;
}

.dreht__year {
	position: absolute;
	left: clamp(18px, 2vw, 36px);
	z-index: 3;
	color: var(--dreht-ink);
	font-family: inherit;
	font-size: var(--dreht-year-size);
	font-weight: 800;
	letter-spacing: -.055em;
	line-height: .85;
}

.dreht__item--top .dreht__year {
	bottom: calc(50% + 37px);
}

.dreht__item--bottom .dreht__year {
	top: calc(50% + 42px);
}

@media (min-width: 1025px) {
	/* Give all six milestones more horizontal room while keeping the timeline centered in the viewport. */
	.dreht--layout-horizontal {
		position: relative;
		left: 50%;
		width: min(calc(100% + 120px), calc(100vw - 48px));
		transform: translateX(-50%);
	}

	.dreht--layout-horizontal .dreht__content {
		overflow: visible;
	}
}

@media (max-width: 1024px) and (min-width: 768px) {
	.dreht--layout-horizontal .dreht__item {
		/* Three comfortable cards per tablet viewport. */
		flex-basis: 30%;
	}
}

@media (max-width: 767px) {
	.dreht--layout-horizontal {
		padding: 12px 0 26px;
		--dreht-year-size: 3.4rem;
		--dreht-year-height: 2.89rem;
	}

	.dreht--layout-horizontal .dreht__item {
		flex-basis: min(82vw, 310px);
		min-height: 500px;
	}

	.dreht--layout-horizontal .dreht__content {
		left: 52px;
		width: calc(100% - 68px);
	}

	.dreht--layout-horizontal .dreht__year {
		left: 48px;
	}
}

@media (max-width: 1024px) {
	/* Keep horizontal scrolling on tablet and mobile when Horizontal is selected. */
	.dreht--layout-horizontal {
		overflow-x: auto;
		cursor: grab;
	}
}