/* based on code by
Jatin Sharma, https://codepen.io/j471n/pen/vYJaLvm
Adjusted to work with a single CSS class
*/

.timeline > div:nth-child(odd) {
	position: relative;
	padding: 1.5rem 0 1.5rem 1.5rem;
}
.timeline > div:nth-child(even) {
	position: relative;
	padding: 1.5rem 1.5rem 1.5rem 0;
	text-align: right;
}

.timeline > div::before {
	content: "";
	position: absolute;
	width: 50%;
	border: solid var(--mn-dd);
  }
.timeline > div:nth-child(odd)::before {
	left: 0;
	top: -3px;
	bottom: -3px;
	border-width: 3px 0 3px 3px;
	border-radius: 2rem 0 0 2rem;
	pointer-events: none;
}
.timeline > div:nth-child(even)::before {
	right: 0;
	top: 0;
	bottom: 0;
	border-width: 3px 3px 3px 0;
	border-radius: 0 2rem 2rem 0;
	pointer-events: none;
}

.timeline > div:first-child::before {
	border-top: 0;
	border-top-left-radius: 0;
	margin-top: 1rem;
}
.timeline > div:last-child::before {
	margin-bottom: 1rem;
}

.timeline > div:last-child:nth-child(odd)::before {
	border-bottom: 0;
	border-bottom-left-radius: 0;
}
.timeline > div:last-child:nth-child(even)::before {
	border-bottom: 0;
	border-bottom-right-radius: 0;
}

/* Header */
.timeline h3 {
    color: var(--mn);
    position: relative;
    margin-bottom: 0.3rem;
}

/* Dot  */
.timeline h3::before {
    content: "";
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--mn);
    border-radius: 999px;
    border: 3px solid var(--mn-d);
}

.timeline > div:nth-child(even) > h3 {
    text-align: right;
}

.timeline > div:nth-child(odd) > h3::before {
    top: 0.5rem;
    left: -1.8rem;
}

.timeline > div:nth-child(even) > h3::before {
    top: 0.5rem;
    right: -1.8rem;
}