main {
	--gap: 0;
	section:last-of-type {
		margin-bottom: 0;
	}
}

#at-a-glance {
	padding: 0 10vw;
	--gap: 0;
	img {
		width: 100%;
		height: auto;
		border: 2px solid rgb(var(--action-0));
	}
	h3 {
		font-size: var(--txt-x-small);
	}
	.before {
		img {
			border-right-width: 1px;
			border-left: 0;
			border-top: 0;
		}
	}
	.after {
		img {
			border-left-width: 1px;
			border-right: 0;
			border-bottom: 0;
		}
	}
}

.timeline-point.timeline-point {
	--lineWidth: 1px;
	--gap: 2rem;
	padding: 0;
	margin:0;
	background-color: rgb(var(--base));
	max-width: 100vw;
	position: relative;
	overflow: hidden;
	img {
		width: 40%;
		border-radius: 4px;
		position: sticky;
		padding: .5rem;
	}
	.info {
		padding: 1rem .5rem .5rem;
		width: 60%;
		position: relative;
		h2 {
			margin: 0 0 .5rem;
			font-size: var(--txt-medium);
			position: relative;
			.icon {
				--w: 2.5rem;
				transform: rotate(-90deg);
				position: absolute;
				left: -2.5rem;
				top: .25rem;
				background-color: rgb(var(--action-100));
			}
		}

	}
	&::before,
	&::after {
		content: '';
		display: block;
		position: absolute;
		left: 45%;
		height: 100%;
		width: var(--lineWidth);
		background-color: rgb(var(--action-0));
		//box-shadow: var(--action-shadow);
	}
	&::before {
		height: 1rem;
	}
	&::after {
		top: 4rem;
	}
	&#before-treatment::before,
	&:last-of-type::after {
		display: none;
	}
}
@media (min-width:768px) {
	#at-a-glance {
		h3  {
			font-size: var(--txt-x-large);
		}
	}
	.timeline-point.timeline-point {
		--gap: 4rem;
		img {
			width: 50%;
		}
		.info {
			width: 50%;
			padding: 25vh 1rem 1rem;
			h2 {
				.icon {
					--w: 4rem;
					left: -6.15rem;
					top: 0;
				}
			}
			a {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}

			time {
				text-transform: uppercase;
				font-size: var(--txt-x-small);
			}
		}
		&::before,
		&::after {
			left: calc(50% + 2rem);
		}

		&::before {
			height: calc(25vh - 2rem);
		}
		&::after {
			top: calc(25vh + 6rem);
		}
	}
}