/* Admin layout */
@layer base {
  .holy-grail-grid {
    @apply grid min-h-screen overflow-y-auto;
    grid-template: 40px 1fr / 300px 1fr;

    & .holy-grail__header {
      @apply h-10 col-start-1 col-end-4 row-start-1 row-end-2;
    }

    & .holy-grail__sidebar {
      @apply col-start-1 col-end-2 row-start-2 row-end-4;

      width: 300px;
      max-height: calc(100vh - 2.5rem);
    }

    & .holy-grail__main {
      @apply col-start-1 col-end-3 row-start-2 row-end-3;
    }

    & .holy-grail__footer {
      @apply col-start-1 col-end-3 row-start-3 row-end-3;
    }

    @screen md {
      & .holy-grail__main {
        @apply col-start-2;
      }

      & .holy-grail__footer {
        @apply col-start-2;
      }
    }
  }
}