.header,
.footer {
  @media (max-width: 992px) {
    [data-layout="alt"] & {
      --_section-right: var(--app-shell-aside-offset, 0px);
    }
  }
}

.aside {
  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));

  @media (min-width: 993px) {
    [data-layout="alt"] & {
      --_section-top: var(--_section-top, var(--app-shell-header-offset, 0px));
      --_section-height: var(
        --_section-height,
        calc(
          100dvh - var(--app-shell-header-offset, 0px) -
            var(--app-shell-footer-offset, 0px)
        )
      );
    }
  }
}

@media (max-width: 48em) {
  .aside {
    width: 350px;
  }
}

@media (max-width: 48em) {
  .navbar {
    width: 300px;
  }
}