/* Main structure */
.timeline {
	position: relative;
	padding-top: calc(var(--spacing-lg) * 2);
	padding-bottom: calc(var(--spacing-lg) * 2);
	padding-left: calc(calc(var(--spacing) * 2) + .5rem);
}

.timeline::before,
.timeline > ol::before,
.timeline > ol::after {
	content: '';
	position: absolute;
	top: calc(var(--spacing-lg) * 2);
	left: var(--spacing);
	bottom: calc(var(--spacing-lg) * 2);
	width: .5rem;
	background: var(--brand-poppy);

}
.timeline > ol,
.timeline > ol > li {
	position: relative;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.timeline > ol::before,
.timeline > ol::after {
	height: calc(var(--spacing-lg) * 2);
	left: calc(var(--spacing-md) * -1);
}

.timeline > ol::before {
	background: linear-gradient(0deg,rgba(217, 93, 55, 1) 0%, rgba(217, 93, 55, 0) 100%);
	top: calc(var(--spacing-lg) * -2);
	bottom: auto;
}

.timeline > ol::after {
	background: linear-gradient(0deg,rgba(217, 93, 55, 0) 0%, rgba(217, 93, 55, 1) 100%);
	top: auto;
	bottom: calc(var(--spacing-lg) * -2);
}

.timeline > ol > li {
	margin: 0 0 var(--spacing-md) var(--spacing);
}

.timeline > ol > li:last-child {
	margin-bottom: 0;
}

.timeline > ol > li::before {
	content: '';
	background: var(--brand-poppy);
	position: absolute;
	width: 1rem;
	height: 1rem;
	left: calc(calc(calc(var(--spacing) * 2) + .5rem) * -1);
	top: -.5rem;
	border-radius: 50%;
	margin-left: -.25rem;
}

/* Entries */
.timeline-entry {
	background: #fff;
	text-align: left;
	position: relative;
	display: flex;
	flex-direction: column-reverse;
}

.timeline-entry::before {
	content: '';
	position: absolute;
	top: 0;
	left: -1.5rem;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 1.5rem 1.25rem 0;
	border-color: transparent #fff transparent transparent;
}

.timeline .entry-image {
	position: relative;
	margin: 0;
}

.timeline-entry-inner {
	padding: var(--spacing-md);
}

.timeline .entry-year {
	font-size: 1.5em;
	margin: 0 0 var(--spacing);
}

.timeline .entry-heading {
	font-size: 1.25rem;
	font-family: var(--font-family-sdecondary);
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin: 0 0 var(--spacing);
}

.timeline .entry-content {
	font-size: .9375rem;
}

.timeline .entry-content ul {
	list-style-type: disc;
	padding-left: var(--spacing-md);
}


/* Columns */
@media (min-width: 600px) {
	.timeline-entry {
		flex-direction: row-reverse;
		min-height: 10rem;
	}

	.timeline .entry-image {
		width: 40%;
	}

	.timeline-entry-inner {
		width: 60%;
	}

	.timeline-entry-inner:first-child {
		width: 100%;
		flex-grow: 1;
	}

	.timeline .entry-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}


@media (min-width: 1024px) {
	.timeline {
		padding-left: 0;
	}

	.timeline::before,
	.timeline > ol::before,
	.timeline > ol::after {
		left: 50%;
		margin-left: -.25rem;
	}

	.timeline > ol > li {
		margin-right: calc(50% + var(--spacing-lg));
		margin-left: 0;
		margin-top: calc(var(--spacing-lg) * -2);
	}

	.timeline > ol > li:first-child {
		margin-top: 0;
	}

	.timeline > ol > li:nth-child(odd) {
		margin-right: 0;
		margin-left: calc(50% + var(--spacing-lg));
	}

	.timeline > ol > li:nth-child(even) .timeline-entry {
		flex-direction: row;
	}

	.timeline > ol > li:nth-child(even) .timeline-entry::before {
		left: auto;
		right: -1.5rem;
		border-width: 1.25rem 1.5rem 0 0;
		border-color: #fff transparent transparent transparent;
	}

	.timeline > ol > li::before {
		right: -2.5rem;
		left: auto;
		margin: 0;
	}

	.timeline > ol > li:nth-child(odd)::before {
		left: -2.5rem;
		right: auto;
	}
}