body > main {
  @apply grid min-h-lvh bg-gray-50;
  grid-template-areas:
  "logo header menu"
  "content content content";
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr;
  & > .logo {
    @apply text-gray-800 flex p-3 bg-emerald-50 border-b border-b-gray-200 gap-2.5 items-center;
    grid-area: logo;
    .icon {
      @apply h-6 w-auto;
    }
    .logotype {
      @apply h-3 w-auto;
    }
  }
  & > nav.top {
    @apply text-emerald-700 flex p-3 bg-emerald-50 border-b border-b-gray-200;
    grid-area: header;
    ul {
      @apply flex gap-3  max-w-7xl w-full m-auto;
      li {
        a {
          @apply text-gray-900 text-sm font-medium hover:bg-emerald-100 p-2.5 rounded-md;
        }
        &.active {
          a {
            @apply text-emerald-700 font-semibold;
          }
        }
        &.spacer {
          @apply flex-1;
        }
      }
    }
  }
  & > nav.user-menu {
    @apply text-emerald-700 flex p-3 bg-emerald-50 border-b border-b-gray-200;
    grid-area: menu;
  }

  & > nav.sidebar {
    grid-area: sidebar;
  }
  & > main {
    @apply overflow-scroll;
    grid-area: content;
    height: calc(100vh - var(--topnav-height));
    max-height: calc(100vh - var(--topnav-height));
  }
}