style.css

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
}

figure {
	margin: 0;
}

img, video {
	max-width: 100%;
}

figure > * {
	max-width: 100%;
	width: auto;
	max-height: 80vh;
	height: auto;
}

main.oui-interaction {
	/* Each child element is as wide as main in a single row */
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	grid-template-rows: 1fr;
	/* This element will overflow scroll and scroll-snap */
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	margin-bottom: 0;
	padding: 0;
}

/* On small screens use proximity instead for a slightly different experience */

/* @media only screen and (max-width: 480px) {
	main {
		scroll-snap-type: x proximity;
	}
} */

main>article {
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/**
article layout
**/

body {
	font-family: 'Sen', sans-serif;
	display: grid;
	grid-template-rows: min-content 1fr;
}

header.oui-viewing {
	padding: 0.2em 2em;
	background: var(--color1);
	min-height: auto;
}

article {
	height: 100%;
	overflow-y: auto;
	padding: 10px 20px;
}

article:after {
	content: '';
	padding-bottom: 20vh;
	display: block;
}

article>* {
	margin: revert;
	padding: revert;
	list-style: revert;
}

.article-nav, .lang-nav {
	position: absolute;
	bottom: 1em;
	z-index: 2;
}

.article-nav {
	right: 1em;
}

.lang-nav {
	left: 1em;
}

b {
	font-weight: bold;
}

/* On Desktop Break Open the Menus to make the most of the space*/

@media screen and (min-width: 600px) {
	body.container {
		display: grid;
		grid-template: min-content min-content 1fr/max-content 1fr;
		margin: 0;
		max-width: none;
		gap: 1em;
	}
	.article-nav, .lang-nav {
		position: static;
		z-index: auto;
	}
	/* .article-nav>details, .lang-nav>details {
		display: contents;
	} */
	/* .article-nav>details>summary, .lang-nav>details>summary {
		display: none;
	} */
	.article-nav>details>ul, .lang-nav>details>ul {
		/* position: static;
		opacity: 1 !important;
		transform: none; */
		left: 0 !important;
		top: 0 !important;
		bottom: auto !important;
		right: auto !important;
		z-index: 4;
	}
	main.oui-interaction {
		grid-column: 2;
		grid-row: 2/span 2;
		display: block;
		scroll-snap-type: none;
		overflow-x: auto;
		max-width: 1024px;
		margin: 0 auto;
	}
	header {
		grid-column-end: span 2;
	}
	main>article {
		height: auto;
		padding-bottom: 2em;
	}
	main>article:after {
		content: none;
	}
}