.timeline-filter {
	padding-top: 2rem;
	margin-bottom: 2rem;
	margin-inline: auto;
	text-align: center;
}

.timeline > .timeline-entry[hidden] {
	display: none;
}

.timeline {
	position: relative;
	margin-bottom: 4rem;
}

.timeline::after {
	content: '';
	position: absolute;
	width: 0;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 50%;
	margin-left: calc( var(--pico-border-radius) * -1 );
	border: var(--pico-border-radius) solid var(--pico-color);
	border-radius: var(--pico-border-radius);
}

.timeline > .timeline-entry {
	position: relative;
	background-color: inherit;
	width: calc(50% - 2rem);
	padding: 1rem 1.5rem;
	margin-bottom: -4rem;
	background-color: var(--pico-card-sectioning-background-color);
	border-radius: var(--pico-border-radius);
	box-shadow: var(--pico-card-box-shadow);
}

.timeline > .timeline-entry::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 1rem;
	width: 0;
	z-index: 1;
	border: medium solid var(--pico-card-sectioning-background-color);
}

.timeline > .timeline-entry::after {
	content: '';
	position: absolute;
	width: 1rem;
	height: 1rem;
	top: 1.5rem;
	right: -2.5rem;
	background-color: var(--pico-background-color);
	border: var(--pico-border-radius) solid var(--pico-color);
	border-radius: 50%;
	z-index: 1;
}

.timeline > :nth-child(odd of .timeline-entry:not([hidden])) {
	left: 0;
}

.timeline > :nth-child(odd of .timeline-entry:not([hidden]))::before {
	right: -1rem;
	border-width: 1rem 0 1rem 1rem;
	border-color: transparent transparent transparent var(--pico-card-sectioning-background-color);
}

.timeline > :nth-child(even of .timeline-entry:not([hidden])) {
	left: calc(50% + 2rem);
}

.timeline > :nth-child(even of .timeline-entry:not([hidden]))::before {
	left: -1rem;
	border-width: 1rem 1rem 1rem 0;
	border-color: transparent var(--pico-card-sectioning-background-color) transparent transparent;
}

.timeline > :nth-child(even of .timeline-entry:not([hidden]))::after {
	left: -2.5rem;
}

@media screen and (max-width: 1536px) {
	.timeline {
		margin-bottom: 5rem;
	}

	.timeline > .timeline-entry {
		margin-bottom: -5rem;
	}

	.timeline > .timeline-entry::before {
		top: 1.5rem;
	}

	.timeline > .timeline-entry::after {
		top: 2rem;
	}
}

@media screen and (max-width: 1280px) {
	.timeline {
		margin-bottom: 6rem;
	}

	.timeline > .timeline-entry {
		margin-bottom: -6rem;
	}

	.timeline > .timeline-entry::before {
		top: 2rem;
	}

	.timeline > .timeline-entry::after {
		top: 2.5rem;
	}
}

@media screen and (max-width: 1024px) {
	.timeline {
		margin-bottom: 7rem;
	}

	.timeline > .timeline-entry {
		margin-bottom: -7rem;
	}

	.timeline > .timeline-entry::before {
		top: 2.5rem;
	}

	.timeline > .timeline-entry::after {
		top: 3rem;
	}
}

@media screen and (max-width: 768px) {
	.timeline {
		margin-bottom: 0;
	}

	.timeline::after {
		left: 0;
	}
	
	.timeline > .timeline-entry {
		width: calc(100% - 1rem);
		margin-left: 1rem;
		margin-bottom: 0.5rem;
	}
	
	.timeline > :nth-child(n of .timeline-entry:not([hidden]))::before {
		top: 1.75rem;
		left: -1rem;
		border-width: 1rem 1rem 1rem 0;
		border-color: transparent var(--pico-card-sectioning-background-color) transparent transparent;
	}

	.timeline > :nth-child(n of .timeline-entry:not([hidden]))::after {
		top: 2.25rem;
		left: -1.5rem;
	}
	
	.timeline > :nth-child(even of .timeline-entry:not([hidden])) {
		left: 0%;
	}
}