.dt-timeline {
	--dt-border: #000;
	--dt-spine: 64px;
	--dt-gap: 44px;
	max-width: 1000px;
	margin: 2rem auto;
	padding: 0 1rem;
	box-sizing: border-box;
}
.dt-timeline *, .dt-timeline *::before, .dt-timeline *::after { box-sizing: border-box; }

/* Decade colors (primary/saturated): pink, light blue, red, orange, yellow, blue, green, purple */
.dt-c0 { --dt-color: #ff3d9a; --dt-text: #000; }
.dt-c1 { --dt-color: #3dc8ff; --dt-text: #000; }
.dt-c2 { --dt-color: #e8202a; --dt-text: #fff; }
.dt-c3 { --dt-color: #ff8a00; --dt-text: #000; }
.dt-c4 { --dt-color: #ffd800; --dt-text: #000; }
.dt-c5 { --dt-color: #1f4fff; --dt-text: #fff; }
.dt-c6 { --dt-color: #12b04a; --dt-text: #000; }
.dt-c7 { --dt-color: #8a2be2; --dt-text: #fff; }

.dt-decade {
	position: relative;
	padding: 1.5rem 0;
}

/* Colored spine segment for the decade */
.dt-decade::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: var(--dt-spine);
	transform: translateX(-50%);
	background: var(--dt-color);
	border-left: 3px solid var(--dt-border);
	border-right: 3px solid var(--dt-border);
}
.dt-decade + .dt-decade::before { border-top: 3px solid var(--dt-border); }

.dt-decade-label {
	position: relative;
	z-index: 1;
	width: max-content;
	margin: 0 auto 1.25rem;
	padding: .25rem .9rem;
	background: #fff;
	border: 3px solid var(--dt-border);
	border-radius: 999px;
	font-weight: 700;
	font-size: 1.1rem;
	color: #000;
}

.dt-item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr var(--dt-spine) 1fr;
	column-gap: var(--dt-gap);
	margin-bottom: 1.5rem;
}
.dt-left  .dt-card { grid-column: 1; }
.dt-right .dt-card { grid-column: 3; }

.dt-card {
	position: relative;
	background: var(--dt-color);
	border: 3px solid var(--dt-border);
	border-radius: 8px;
	padding: .75rem;
	color: var(--dt-text, #000);
}
/* Connector line to the spine */
.dt-card::after {
	content: "";
	position: absolute;
	top: 50%;
	width: var(--dt-gap);
	height: 3px;
	background: var(--dt-border);
}
.dt-left  .dt-card::after { right: calc(-1 * var(--dt-gap) - 3px); }
.dt-right .dt-card::after { left:  calc(-1 * var(--dt-gap) - 3px); }

.dt-image { display: block; margin-bottom: .6rem; }
.dt-image img {
	display: block;
	width: 100%;
	height: auto;
	border: 3px solid var(--dt-border);
	border-radius: 4px;
}
.dt-title { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.dt-title a { color: inherit; text-decoration: none; }
.dt-title a:hover, .dt-title a:focus { text-decoration: underline; }
.dt-date { display: block; margin-top: .25rem; font-size: .85rem; opacity: .8; }

/* Mobile: spine on the left, all cards on the right */
@media (max-width: 700px) {
	.dt-timeline { --dt-spine: 28px; --dt-gap: 20px; }
	.dt-decade::before { left: calc(var(--dt-spine) / 2); }
	.dt-decade-label { margin-left: calc(var(--dt-spine) + var(--dt-gap)); }
	.dt-item { grid-template-columns: var(--dt-spine) 1fr; }
	.dt-left .dt-card, .dt-right .dt-card { grid-column: 2; }
	.dt-left .dt-card::after, .dt-right .dt-card::after {
		left: calc(-1 * var(--dt-gap) - 3px);
		right: auto;
	}
}