@layer layout {
	html, body {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	body {
		min-height: 100vh;
		& > header {
			grid-area: head;
		}

		& > main {
			grid-area: main;
		}

		& > footer {
			grid-area: footer;

		}
	}

	body.layout-landing {
		text-align: center;
		display: grid;
		justify-content: center;
		align-items: center;
		grid-template-areas:
			"main"
			"footer";
		grid-template-rows: 1fr min-content;

		& main {
			padding: 1rem;
		}
	}

	body.layout-sidebar {
		display: grid;
		grid-template-rows: min-content 1fr;
		grid-template-columns: min-content 1fr;
		grid-template-areas:
			"head head"
			"aside main"
			"footer footer";

	  & > header {
			background: var(--color-background-lvl-5);
			display: grid;
			align-content: start;
			& .header__logo {
				display: flex;
				justify-content: space-between;
			}
			& > .header__menu {
				& > nav ul {
					width: 100%;
					display: flex;
					gap: 0.6rem;
					margin: 0;
					padding: 0;

					& li {
						list-style: none;
						display: inline-block;

						&:is([data-current="true"]) {
							font-weight: var(--font-weight-base-bold);
						}

						& a {
							color: inherit;
							text-decoration: none;
						}
					}
				}
			}

			/*&:has(.header__menu__context) {
				& nav {
					display: grid;
					gap: 1rem;
					grid-template-areas:
						"main context";
          align-items: start;

					.header__menu__main {
						grid-area: main;
						border-right: 1px solid var(--color-background-contrast);

						& li {
							padding-right: 1rem;
						}
						& li:is([data-current="true"]) {
							border-top: 1px solid var(--color-background-contrast);
							border-bottom: 1px solid var(--color-background-contrast);
						}
					}

					.header__menu__context {
						grid-area: context;
					}
				}
			}*/
		}

		& > aside {
			grid-area: aside;
			& .menu-context {
				width: 100%;
				display: grid;
				gap: 0.6rem;
				margin: 0;
				padding: 0;

				&:before {
					content: attr(aria-label);
				}
				& li {
					padding-right: 1rem;
					display: inline;
				}
				& li:is([data-current="true"]) {
					border-top: 1px solid var(--color-background-contrast);
					border-bottom: 1px solid var(--color-background-contrast);
				}
			}
		}

		& > footer {
			background: var(--color-background-lvl-5);
		}

		& > * {
			padding: 1rem;
		}

	}

	.page-header {
		display: grid;
		grid-template-columns: 1fr min-content;

		& > .page-header__actions {
			align-self: center;
		}
	}

	.page-list {
		& li {
			display: grid;
			grid-template-columns: 1fr min-content;

			& > .page-list__actions {
				display: flex;
				gap: 1rem;
				align-self: center;
				justify-content: center;
			}
		}
	}

	.media-list {
		padding: 0;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 300px));
		gap: 1rem;

		& > li {
			display: grid;
		}
	}

	.media-item {
		display: grid;
		gap: 1rem;
	}
}