.context-dark .line-item::before {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
	.line {
		position: relative;
		display: inline-flex;
		padding-bottom: 1.25rem;
	}
	.line-item {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
	}
	.line-item::before, .line-item::after {
		position: absolute;
		right: 1.5625rem;
		content: '';
	}
	.line-item::before {
		bottom: 3px;
		width: 100vw;
		border-bottom: 1px solid #cfcfcf;
	}
	.line-item::after {
		bottom: 0;
		width: 7px;
		height: 7px;
		background-color: #D79E8E;
	}
}

@media (min-width: 992px) {
	.line {
		padding-bottom: 2rem;
	}
	.line .line-item::before, .line .line-item::after {
		right: 4.6875rem;
	}
	.line-2 {
		padding-bottom: 4.6875rem;
	}
	.line-2 .line-item::before, .line-2 .line-item::after {
		right: 0.375rem;
	}
	.line-4 {
		padding-bottom: 2.375rem;
	}
	.line-4 .line-item::before, .line-4 .line-item::after {
		right: 0;
	}
}

@media (min-width: 1600px) {
	.line-3 {
		padding-bottom: 0;
	}
	.line-3 .line-item::before, .line-3 .line-item::after {
		top: 27px;
		right: calc( 100% + 30px);
		bottom: auto;
	}
	.line-3 .line-item::before {
		top: 30px;
	}
}