@layer overrides {
	.with-aside {
		display: grid;
		inline-size: 100%;
		margin-inline: auto;
		max-inline-size: min(100%, calc(var(--max-width, 80rem) + (20px * 2)));

		@media (width >= 75em) {
			grid-template-columns: 1fr 3fr;

			& .aside-content {
				position: sticky;
				top: var(--header-height);
				z-index: 1;

				& > * {
					padding: 45px 20px 30px;
				}
			}

			& .main-content > *:not(.hero-container),
			& .hero-content-wrapper {
				padding-inline-start: 55px;
			}

			& .main-content > * > * {
				margin-inline: 0;
			}
		}
	}

	.aside {
		--link-color: var(--color-black);
		
		background-color: var(--color-gray-10);
		color: var(--link-color);
		min-block-size: calc(var(--body-font-size-l) * 1.5 + 40px);

		@media (width < 75em) {
			position: sticky;
			top: var(--header-height);
			z-index: 1;
		}

		& ul {
			gap: 5px;

			& :is(a, button) {
				align-items: center;
				background-color: rgb(from var(--color-gray-2) r g b / var(--link-background-alpha, 0%));
				border-radius: 10px;
				color: rgb(from var(--link-color) r g b / var(--link-alpha, 80%));
				display: flex;
				font-weight: 700;
				justify-content: space-between;
				padding: var(--vertical-padding) 10px var(--vertical-padding) 20px;
				
				&:hover,
				&:focus-visible,
				&[aria-current='page'] {
					--link-background-alpha: 100%;
					--link-alpha: 100%;
					--link-color: var(--color-red-1);
				}
			}

			& a {
				--vertical-padding: 15px;
			}

			& button {
				--vertical-padding: 7px;

				&:hover,
				&:focus-visible {
					--link-color: var(--link-hover-color, var(--color-red-1));
				}
			}
		}
	}

	.aside-content > * {
		max-block-size: calc(100vh - var(--header-height));
		overflow-y: auto;
		-ms-overflow-style: none;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}
	}
}