.timeline {
	--arrow-size: 10px;
	--bullet-size: 24px;
	margin: 0;
	padding: 0 0 30px;
	background-image: linear-gradient(
		to right,
		transparent 0,
		transparent calc(50% - 3px),
		black calc(50% - 3px),
		black calc(50% + 3px),
		transparent calc(50% + 3px),
		transparent 100%
	);
	strong {
		color: white;
		font-weight: 400;
	}
	> li {
		display: block;
		padding-top: calc(var(--bullet-size) + var(--arrow-size) + 30px);
		padding-bottom: 1em;
		> * {
			width: fit-content;
			margin: 0 auto;
		}
		> h3 {
			background-color: var(--yellow);
			color: black;
			font-weight: 400;
			border-radius: 0.15em;
			padding: 0.25em 0.5em;
			margin-bottom: 15px;
			position: relative;
			&::before {
				content: "";
				position: absolute;
				top: calc(-1 * (var(--bullet-size) + var(--arrow-size) + 10px));
				left: 50%;
				transform: translate(-50%);
				width: var(--bullet-size);
				height: var(--bullet-size);
				background-color: black;
				border-radius: 50%;
				border: 7px solid white;
			}
			&::after {
				content: "";
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%, -100%);
				border: var(--arrow-size) solid transparent;
				border-bottom-color: var(--yellow);
				width: 0;
				height: 0;
			}
		}
		.timeline-details {
			background-color: hsl(216 70% 64%);
			border: 1px solid hsl(217 68% 59%);
			padding: 1em;
		}
	}
	@media (min-width: 768px) {
		> li {
			width: 50%;
			padding-left: 30px;
			&:nth-child(odd) {
				margin-left: auto;
			}
			h3 {
				margin-left: 0;
				&::before {
					top: 50%;
					left: -42px;
					transform: translateY(-50%);
				}
				&::after {
					border-bottom-color: transparent;
					border-right-color: var(--yellow);
					left: 0;
					top: 50%;
					transform: translate(-100%, -50%);
				}
			}
			.timeline-details {
				border: none;
				background: none;
				width: 100%;
				padding: 0;
			}
			&:nth-child(even) {
				padding-right: 30px;
				h3 {
					margin-left: auto;
					margin-right: 0;
					&::before {
						right: -42px;
						left: unset;
					}
					&::after {
						border-right-color: transparent;
						border-left-color: var(--yellow);
						right: 0;
						left: unset;
						transform: translate(100%, -50%);
					}
				}
				.timeline-details {
					text-align: right;
				}
			}
		}
	}
}