:root {
	--grid-border: 1px solid var(--midgrey-col);
}

.page { /* wrapper around everything */
	grid-template-rows: auto 1fr auto; /* vertical sizes */
	grid-template-columns: minmax(180px,max-content) 1fr 1fr; /* horizontal sizes */
	grid-template-areas: "l . ."
						 "h m s"
						 "f f f";
}

main,
.bits-wrapper {
	display: grid; /* nested grid (inside .page) */
	grid-template-columns: max-content auto;
	grid-template-rows: auto 1fr;
	grid-column-gap: 1.5rem;
}
.bits-wrapper {
	grid-area: s;
}
.main-section-name {
	grid-column: 1;
	align-self: start;
	writing-mode: vertical-rl;
	transform: rotate(-180deg);
	padding: 10px 2px 10px 0;
	border-top: var(--grid-border);
	border-right: var(--grid-border);
	border-bottom: var(--grid-border);
	border-top-right-radius: 4px;
	text-transform: lowercase;
}

.empty {
	grid-row: 2;
	grid-column: 1;
	border-right: var(--grid-border);
}

main > ul,
.bits {
	grid-column: 2;
	grid-row: 1 / span 2;
}

main li,
.bits li {
	padding: 1.5rem 0;
}
main li:first-child,
.bits li:first-child {
	padding-top: 0;
}
main li:last-child,
.bits li:last-child {
	padding-bottom: 0;
}
main li:not(:last-child),
.bits li:not(:last-child) {
	border-bottom: 2px dotted var(--midgrey-col);
}

.bits li p:not(:first-child) {
	padding-top: 0.5em;
}
.bits p {
	line-height: 1.5em;
}
.bits blockquote {
	font-style: italic;
}

main li time {
	padding-top: 10px;
	display: inline-block;
	font-size: 0.7em;
	color: var(--txt-lt-col);
}

main li h2 {
	font-weight: 400;
	font-style: italic;
	margin-bottom: 0.4em;
	display: inline-block;
}

@media screen and (max-width: 1399px ) {
	.page {
		grid-template-columns: 1fr;
		grid-template-areas: "l ."
						 	 "h m"
						 	 "h s"
						 	 "f f";
	}
	.bits-wrapper {
		margin-top: 3rem;
	}
}
@media screen and (max-width: 999px ) {
	.page {
		grid-template-areas: "l"
						 	 "h"
						 	 "m"
						 	 "s"
						 	 "f";
	}
	.bits-wrapper {
		margin-top: 25px;
	}
}