body > header {
	position: sticky;
	top: 0;
	z-index: 1;

	display: flex;
	align-items: baseline;
	gap: 1em;

	padding: 0.5em 1em;

	background-color: var(--primary-background-plus-color);
	box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.3);
}

main {
	display: flex;
	flex-direction: column;
	gap: 1em 2em;
	padding: 2em 1em;
	min-height: calc(100dvh - 8em);
}

footer {
	padding: 2em 1em 3em;

	color: var(--muted-color);
	font-size: 87.5%;
	text-align: center;;
}

.summary {
	position: sticky;
	top: 3.5em;
	z-index: 1;

	display: flex;
	flex-direction: column;
	gap: 0.5em;

	border-radius: var(--common-border-radius);
	background: var(--primary-background-color);
	box-shadow: 0 0.1em 0.5em var(--primary-background-color);
}

.summary .header {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-bottom: 0.5em;
}

.summary .title {
	font-size: 120%;
	font-weight: bold;
}

.summary .info {
	display: flex;
	gap: 2em;

	font-size: 87.5%;
}

@media (width > 66em) {
	main {
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
	}

	.main-content {
		flex: 1000 1 46em;
	}

	.summary {
		flex: 1 0 16em;
		top: 6em;
	}

	.summary .info {
		padding-top: 1em;
		flex-direction: column;
		gap: 0.5em;
	}
}