@layer gallery {
	.gallery {
		position: relative;
	}

	.gallery__scrollcontainer {
		overflow-x: scroll;
		scroll-snap-type: x mandatory;
		display: flex;
		flex-direction: row;
	}

	.gallery__entry {
		scroll-snap-align: center;
		flex: 0 0 100%;
	}

	.gallery__entry > * {
		margin: 0;
		padding: 0;
	}

	.gallery__progress {
		position: absolute;
		z-index: 10;
		left: 0;
		top: 0;
		width: 100%;
		height: 1em;
		transform-origin: 0 50%;
		transform: scaleX(0);
		background: red;
	}
}

@layer layout {
	html,
	body {
		margin: 0;
		padding: 0;
	}

	html {
		background: white;
		color: black;
	}

	body {
		font-size: clamp(1.1em, calc(0.5em + 1vw), 3em);
		line-height: 1.42;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	}

	main {
		font-weight: 300;
		width: 90vw;
		max-width: 40em;
		margin: 0 auto;
		padding: 4rem 0;
	}

	main img {
		width: 100%;
		height: auto;
	}

	main :is(h1, h2, h3) {
		font-family: Georgia, 'Times New Roman', Times, serif;
	}

	main h1 {
		font-size: 3em;
	}

	main h2 {
		font-size: 2em;
		margin-top: 5rem;
		border-bottom: 1px solid #ccc;
	}

	a, a:visited {
		color: blue;
	}

	figcaption {
		text-align: center;
		font-style: italic;
		font-size: 75%;
	}
}