@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 min-content 1fr min-content;
		grid-template-columns: 1fr;
		grid-template-areas:
			"head"
			"aside"
			"main"
			"footer";

		@media (min-width: 650px) {
			grid-template-rows: min-content 1fr;
			grid-template-columns: min-content 1fr;
			grid-template-areas:
				"head head"
				"aside main"
				"footer footer";
		}
	  & > header {
			padding: 0;
			background: var(--color-background-lvl-5);
			display: grid;
			align-content: start;
			container-type: inline-size;
			& .header__logo {
				padding: 1rem;
				display: flex;
				justify-content: space-between;
				flex-direction: column-reverse;
				align-items: center;

				& > h1 {
					margin: 1rem 0;
				}

				& > nav {
					font-size: small;
				}

				@container (min-width: 500px) {
					flex-direction: row;
				}
			}
			& > .header__menu {
				background: var(--color-background-lvl-10);
				padding: 1rem;
				container-type: inline-size;
				& > nav {
					display: grid;
					gap: 1rem;
					grid-template-areas:
						"main main"
						"websites deployButton";
					align-items: end;
					.header__menu__main {
						grid-area: main;
					}
					.header__menu__websites {
						grid-area: websites;
					}
					.deploy-button {
						grid-area: deployButton;
					}
					@container (width >= 600px) {
						grid-template-areas:
							"main websites deployButton";
						grid-template-columns: 1fr min-content min-content;
						align-items: center;
						justify-content: space-between;
					}
					& > ul {
						width: 100%;
						display: flex;
						gap: 0.6rem;
						margin: 0;
						padding: 0;
						flex-wrap: wrap;

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

							&:not(:first-child):before {
								content: "|"
							}

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

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

						&.header__menu__websites li:last-child:before {
							content: "/";
						}
					}
				}

				& > nav ul:not(:empty) {
					&:before {
						content: attr(aria-label);
					}
				}
			}
		}

		& > aside {
			grid-area: aside;
			min-width: 20ch;
			background: var(--color-background-lvl-10);
			& .menu-context {
				width: 100%;
				display: grid;
				gap: 0.6rem;
				margin: 0;
				padding: 0;

				&:before {
					content: attr(aria-label);
					font-family: var(--font-family-head);
					font-size: 1.2rem;
					white-space: nowrap;
				  overflow: hidden;
				  text-overflow: ellipsis;
				  width: 100%;
				}
				& 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 {
		display: grid;
		gap: 1rem;
		& li {
			display: grid;
			grid-template-columns: 1fr min-content;
			margin: 0;

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

	.badge {
		display: inline-block;
		font-size: 0.75rem;
		padding: 0.125rem 0.375rem;
		border-radius: var(--radius-m);
		background: var(--color-brand);
		color: var(--color-contrast);
		font-weight: var(--font-weight-base-bold);

		&.badge--sub {
			background: var(--color-background-lvl-10);
			color: var(--color-base-normal);
		}
	}

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

		& > li {
			display: grid;
			grid-template-rows: auto min-content min-content;
			align-items: center;
		}
	}

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