:root {
	--seriesaccentcolour: #151514;
	--ficbordercolour: #323334;
	--ficshadowcolour: #323334;
	}

body {
	counter-reset: counter_v;
	}

.library_grid {
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;
	margin: 2em 0 1em 0;
	gap: 1em;
	}

.fic {
	flex: 0 1 22%;
	padding: 1.5em 1em;

	background-color: var(--pagecolour);
	border: 2px solid var(--ficbordercolour);
	box-shadow: 4px 4px var(--ficshadowcolour);
	}
.fic p { font-size: 0.9em; }
.fic ul li { font-size: 0.8em; }

.fic_v:before {
	content: counter(counter_v) ".\0000a0";
	counter-increment: counter_v;
	}

.series {
	margin-top: 2em;	
	}
/* Sized for small screens (breakout below) */
.series_description {
	grid-column-start: leftmost;
	grid-column-end: rightmost;
	
	padding: 1em;
	background-image:
		linear-gradient(180deg, transparent 2em, var(--headertextcolour) 2em 2.2em, var(--pagecolour) 2.2em), 
		repeating-linear-gradient(-45deg,
		var(--pagecolour), 
		var(--pagecolour) 1em,
		var(--seriesaccentcolour) 1em,
		var(--seriesaccentcolour) 2em
		);
	border: 2px solid var(--seriesaccentcolour);
	}
.series_description h3 {
	background-color: var(--headerbackgroundcolour);
	width: fit-content;
	padding: 0.2em 0.4em;
	border-radius: 0.2em;
	}

.wordcount::after { content: 'k words'; }
.pubdate::before { content: 'Published on '; }

@media (min-width: 1100px) {
	.library_grid {
		flex-flow: row wrap;
		align-items: flex-start;
		align-content: center;
		}
	}
@media (min-width: 1500px) {
	.series_description { 
		grid-column-start: leftbreak;
		grid-column-end: rightbreak;
		}
	}