@layer components {
	.timeline {
		padding: 6em 0;
	}

	.timeline-inner {
		display: flex;
		flex-wrap: wrap;
		position: relative;
		gap: 10em 1px;
	}

	.timeline:before {
		content: '';
		width: 2px;
		height: calc(100% - 6em);
		left: 0;
		right: 0;
		top: 3em;
		position: absolute;
		background-color: #6baed8;
		margin: 0 auto;
		z-index: -1;
	}

	@media(max-width: 768px) {
		.timeline:before {
			left: 40px;
			margin: 0;
		}
	}

	.timeline .dot {
		height: 25px;
		width: 25px;
		position: absolute;
		top: calc(3em - 12.5px);
		left: 0;
		right: 0;
		margin: 0 auto;
		background-color: #034694;
		border-radius: 50%;
	}

	@media(max-width: 768px) {
		.timeline .dot {
			left: 28px;
			margin: 0;
		}
	}

	.timeline .timeline-item {
		flex: 0 0 50%;
		display: flex;
		align-items: center;
		gap: 2em;
		position: relative;
	}

	@media(max-width: 768px) {
		.timeline .timeline-item {
			flex: 0 0 100%;
			left: auto !important;
			right: auto !important;
		}
	}

	.timeline .timeline-item:nth-child(even) {
		text-align: right;
		flex-direction: row-reverse;
	}

	@media(max-width: 768px) {
		.timeline .timeline-item:nth-child(even) {
			text-align: left;
			flex-direction: row;
		}
	}

	.timeline .timeline-item:nth-child(odd) {
		margin-left: auto;
	}

	@media(max-width: 768px) {
		.timeline .timeline-item:nth-child(odd) {
			margin-left: 0;
		}
	}

	.timeline .timeline-item .img-wrap {
		padding: 8px;
		border: 2px solid #6baed8;
		background-color: #6baed8;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.timeline .timeline-item img {
		aspect-ratio: 1;
		object-position: center;
		object-fit: contain;
		position: relative;
		z-index: 1;
		min-width: 30px;
	}

	.timeline .timeline-item .bg-dot {
		position: absolute;
		width: 0;
		aspect-ratio: 1;
		border-radius: 50%;
		background-color: #034694;
		z-index: -1;
		transition: width .3s;
	}
}