src/system-layout.css
@layer --system {
	body {
		--viewport-padding: minmax(var(--system-spacing-page-inline), 1fr);
		--content-width: minmax(
			calc(var(--system-dimension-min-width) - (var(--system-spacing-page-inline) * 2)),
			var(--system-dimension-content-width)
		);

		grid-template-columns:
			[--viewport-start] var(--viewport-padding) [--content-start] var(--content-width) [--content-end] var(
				--viewport-padding
			)
			[--viewport-end];
	}

	@container --system (width) {
		header:is(body > header),
		footer:is(body > footer) {
			display: grid;
			grid-template-columns: subgrid;
			grid-column: --viewport-start / --viewport-end;
			padding-block: var(--system-spacing-main);

			& > * {
				grid-column: --content-start / --content-end;
				margin: 0;
				padding: 0;
			}
		}

		header:is(body > header) {
			background: var(--system-surface-color);

			& > :is(h1, h2, h3),
			& > p:only-child {
				font-weight: var(--system-font-weight-extralight);
				font-family: var(--system-font-family-display);
				font-size: var(--system-font-size-xxl);
				color: var(--system-gray-text);
			}
			& > nav {
				font-family: var(--system-font-family-interactive);
				& [href] {
					color: var(--system-link-text);
				}
				& [aria-current='page'] {
					pointer-events: none;
					text-decoration: none;
					color: currentcolor;
				}
			}
		}

		:is(header, main, footer):not(:has(*)) {
			display: none;
		}

		main:is(body > main) {
			/* Center main in page */
			grid-column: --content-start / --content-end;
			container: --content / inline-size;
			padding-block: clamp(
				var(--system-spacing-main) * 2,
				var(--system-spacing-page-inline),
				var(--system-spacing-main) * 4
			);
			/* Waiting on margin-trim */

			& > *:first-child {
				margin-block-start: unset;
			}

			& > *:last-child {
				margin-block-end: unset;
			}
		}

		header:is(body > header) > nav {
			display: flex;
			column-gap: var(--system-spacing-column-gap);
			margin-block-start: var(--system-spacing-single);
		}
	}
}
