@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.n-storylines__article-header {
	color: $opaque;
	@include oTypographySans(-1);
	@include oGridRespondTo($until: M) {
		margin: 0 0 10px 0;
	}
}

.n-storylines__article {
	margin-bottom: 20px;
	line-height: 24px;
	// styled bullet points
	&::before {
		counter-increment: list;
		content: counter(list);
		font: 16px/14px MetricWeb, sans-serif;
		font-weight: 600;
		color: #ffffff;
		text-align: center;
		background-color: $filler;
		border-radius: 100%;
		height: 15px;
		width: 15px;
		padding: 8px;
		@include oGridRespondTo($until: M) {
			position: absolute;
			left: -35px;
			top: 2px;
		};
		@include oGridRespondTo(M) {
			display: block;
			margin-bottom: 5px;
		}
	}

	// covers varying line numbers for article titles in tablet
	@include oGridRespondTo(M, $until: L) {
		&:nth-child(4) {
			clear: left;
		}
	}


	// tablet viewport only
	@include oGridRespondTo(M, $until: L) {
		border-top-width: 1px;
		//horizontal rule, stetched beyond viewport to the right
		&:nth-child(3)::after {
			left: 41px;
			width: 100vw;
		}

		//horizontal rule, stetched beyond viewport to the left
		&:nth-child(4)::after {
			right: -20px;
			width: 100vw;
			z-index: -1;
		}
	}
}

.n-storylines__top-content {
	counter-reset: list;
	margin: 0 auto;
	@include oGridRespondTo(M) {
		margin: 10px 0 0 -13px;
		width: 100%;
		padding: 0;
	}
}

.n-storyline-timestamp {
	@include oTypographySans(-1);
	color: $opaque;
	margin: 0;
}

.n-storylines__article-link {
	@include oTypographyDisplay(2);
	color: $filler;
	text-decoration: none;
	border-bottom: none;
	opacity: 0;
	animation: fadeIn ease-in 1;
	animation-fill-mode: forwards;
	animation-duration: .5s;

	&:focus {
		cursor: pointer;
		color: oColorsGetPaletteColor('black-50');
	}
}