castopod/app/Resources/styles/layout.css

/* Admin layout */
.holy-grail-grid {
  @apply grid min-h-screen overflow-y-auto;
  grid-template: auto 1fr auto / auto 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-4;
  }

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

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

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