:root {
  --header_height: 3rem;
  --footer_height: 3rem;
  --sidebar_width: 20ch;
  --main_width: calc(min(100%, 1000px) - var(--sidebar_width));
  --side_margin_width: calc(max(500px, 50%) - 500px);
}

.wrapper {
  display: grid;
}

.header_grid {
  grid-area: header;
  height: var(--header_height);
  padding-left: var(--side_margin_width);
}

.header_grid {
  position: sticky;
  top: 0;
  z-index: 100;
}

.main_grid {
  grid-area: main;
  z-index: 0;
}

.page_nav_grid {
  grid-area: page_nav;
}

.footer_grid {
  grid-area: footer;
  height: var(--footer_height);

  @media(600px <=width) {
    position: sticky;
    bottom: 0;
  }
}

.side_left {
  @media(600px <=width) {
    .wrapper {
      grid-template-columns: var(--side_margin_width) var(--sidebar_width) var(--main_width) var(--side_margin_width);
      grid-template-areas:
        "header header header header"
        ". page_nav main ."
        "footer footer footer footer"
    }

    .page_nav_grid {
      position: sticky;
      top: var(--header_height);
      height: calc(100vh - var(--header_height) - var(--footer_height));
      overflow-y: auto;
    }
  }

  @media(width < 600px) {
    .wrapper {
      grid-template-columns: 1fr;
      grid-template-areas:
        "header"
        "page_nav"
        "main"
        "footer"
    }
  }
}

.side_right {
  @media(600px <=width) {
    .wrapper {
      grid-template-columns: var(--side_margin_width) var(--main_width) var(--sidebar_width) var(--side_margin_width);
      grid-template-areas:
        "header header header header"
        ". main page_nav ."
        "footer footer footer footer"
    }

    .page_nav_grid {
      position: sticky;
      top: var(--header_height);
      height: calc(100vh - var(--header_height) - var(--footer_height));
      overflow-y: auto;
    }
  }

  @media(width < 600px) {
    .wrapper {
      grid-template-columns: 1fr;
      grid-template-areas:
        "header"
        "page_nav"
        "main"
        "footer"
    }
  }
}

.none {
  .wrapper {
    grid-template-columns: var(--side_margin_width) 1fr var(--side_margin_width);
    grid-template-areas:
      "header header header"
      ". main ."
      "footer footer footer"
  }

  @media(width < 600px) {
    .wrapper {
      grid-template-columns: 1fr;
      grid-template-areas:
        "header"
        "main"
        "footer"
    }
  }
  @media(600px <=width) {
    .footer_grid{
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }
}

.below_header {
  .wrapper {
    grid-template-columns: var(--side_margin_width) 1fr var(--side_margin_width);
    grid-template-areas:
      "header header header"
      ". page_nav ."
      ". main ."
      "footer footer footer"
  }

  .page_nav_grid {
    display: block;
    & ul li ul {
      display: flex;
      flex-wrap: wrap;
      & li {
        padding-right: 1rem;
      }
    }
  }
}