.timeline {
	--gap: 6rem;

	display: grid;
	grid-template-columns: 1fr;
	grid-auto-flow: row;
	grid-auto-rows: auto;
	align-items: start;
	gap: var(--gap);
	margin-top: 6rem;
	padding: 4rem;
	background: linear-gradient(to bottom, transparent, rgb(255 255 255 / 30%) var(--gap), rgb(255 255 255 / 30%) calc(100% - var(--gap)), transparent) no-repeat calc(var(--gap) / 2) 0% / 1px 100% border-box;
}

.timeline-container {
	margin-top: 6rem;
}

.timeline__item {
	position: relative;
	left: 2rem;
	border-radius: 3px;
	padding: 4rem;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 5%);
	background:
		linear-gradient(rgb(49 229 151 / 0%), rgb(49 229 151 / 100%), rgb(49 229 151 / 0%)) no-repeat 0% .5rem / 1px 4rem border-box,
		rgb(255 255 255 / 8%);
}

.timeline__item__time {
	position: absolute;
	top: 1rem;
	right: 100%;
	width: var(--gap);
	padding: 1rem 0;
	text-align: center;
	background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 80%), transparent) no-repeat 50% 0% / 1px 100% border-box;
}

.timeline-card__heading {
	text-align: left;
	margin: 0 0 1rem 0;
	font-size: 2rem;
	font-weight: 400;
	color: var(--theme__color-accent);
}

.timeline-card__description {
	text-align: left;
	font-size: 2rem;
	color: #fff;
	max-width: 100%;
}


@media only screen and (min-width: 900px) {
	.timeline {
		width: 80vw;
		margin: 0 auto;
		padding: 4rem 0;
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 1fr;
		background-position: 50% 0%;
	}

	.timeline__item {
		left: auto;
	}

	.timeline__item__time {
		position: absolute;
		top: 1rem;
		right: 100%;
		left: auto;
		width: var(--gap);
		padding: 1rem 0;
		text-align: center;
		font-size: 1.2rem;
		background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 80%), transparent) no-repeat 50% 0% / 1px 100% border-box;
	}

	.timeline__item:nth-child(odd) {
		grid-column: 1 / 2;
		background-position: 100% 1rem;
	}

	.timeline__item:nth-child(even) {
		grid-column: 2 / 3;
	}

	.timeline__item:nth-child(1) {
		grid-row: 1 / span 2;
	}

	.timeline__item:nth-child(2) {
		grid-row: 2 / span 2;
	}

	.timeline__item:nth-child(3) {
		grid-row: 3 / span 2;
	}

	.timeline__item:nth-child(4) {
		grid-row: 4 / span 2;
	}

	.timeline__item:nth-child(5) {
		grid-row: 5 / span 2;
	}

	/*
	 * A CSS-only solution needs to list the above declarations for as many children as the timeline may contain...
	 * Alternative solution is to assign a CSS variable (e.g. `--i`) via the style prop to each child, then simply replace the block with:
	 * .timeline__item { grid-row: var(--i) / span 2; }
	 */

	.timeline__item:nth-child(odd)>.timeline__item__time {
		left: 100%;
	}
}