[data-component~="views/layouts/internal"] {
  background-color: var(--color-base-950);
  color: var(--color-base-300);
  height: 100dvh;
  max-width: 140rem;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  #nav-links {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    overflow: auto;
    @media (width < 768px) {
      text-align: right;
    }
  }
  #nav-opener {
    label {
      @media (width >= 768px) {
        display: none;
      }
      font-size: var(--font-2xl);
      margin-left: auto;
      cursor: pointer;
    }
  }
  #wrapper {
    display: grid;
    margin-left: auto;
    margin-right: auto;
    height: 100dvh;
    overflow: hidden;
    @media (width >= 768px) {
      grid-template-columns: clamp(15rem, 25vw, 20rem) 1fr;
    }
    @media (width < 768px) {
      grid-template-columns: 0 1fr;
    }
    #nav-toggle-input {
      display: none;
    }
    #nav {
      display: none;
      position: relative;
      height: 100vh;
      width: 100%;
      grid-area: 1 / 1 / 2 / 2;
      grid-template-rows: 1fr auto;
      @media (width >= 768px) {
        grid-row-end: 3;
        display: grid;
      }
      :checked + & {
        display: grid;
        grid-column: 1 / 3;
        grid-template-rows: 1fr auto auto;
      }
    }
    #main {
      display: grid;
      height: 100dvh;
      overflow: hidden;
      grid-template-rows: 1fr auto;
      grid-template-columns: 1fr;
      grid-column: 2 / 3;
      #page {
        display: grid;
        height: 100%;
        width: 100%;
        overflow-wrap: break-word;
        overflow: scroll;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr clamp(15rem, 25vw, 20rem);
        grid-row: 1 / 2;
        #page-center {
          padding: 1rem;
          overflow: visible;
          @media (width >= 1280px) {
            overflow: scroll;
          }
          grid-column-start: 1;
          grid-column-end: 3;
          &[data-sidebar=true] {
            @media (width >= 1280px) {
              grid-column-end: 3;
            }
          }
          header#top {
            margin-bottom: 1rem;
            h1 {
              margin-top: 0;
              margin-bottom: 0;
            }
          }
        }
        #page-sidebar {
          padding: 1rem;
          overflow: visible;
          @media (width >= 1280px) {
            overflow: scroll;
          }
          grid-column: 1 / 3;
          grid-row: 2 / 3;
          @media (width >= 1280px) {
            grid-column-start: 2;
            grid-row: 1 / 2;
          }
        }
      }
      #footer {
        #nav-bar {
          > :first-child {
            flex-grow: 1;
            display: inline-flex;
            gap: 1rem;
          }
          label {
            display: block;
            @media (width >= 768px) {
              display: none;
            }
            cursor: pointer;
            font-size: var(--font-xl);
          }
        }
      }
    }
  }
}