// two column layout

.side-bar {
  position: fixed;
  z-index: $z-nav;
  display: none;
  height: 100vh;

  @include mq(md) {
    display: block;
    width: $nav-width-md;
  }

  @include mq(lg) {
    display: block;
    width: $nav-width-lg;
  }

  &.nav-open {
    display: block;
    width: 100vw;
  }
}

.main {
  @include container;
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  @include mq(md) {
    margin-left: $nav-width-md;
  }

  @include mq(lg) {
    margin-left: $nav-width-lg;
  }

  &__content {
    flex: 1 0 auto;
  }

  &__footer {
    // 'sticky footer' from: https://css-tricks.com/couple-takes-sticky-footer/#there-is-flexbox
    //  ex = local
    //    footer = main__footer
    //    content = main__content
    //    body = main
    //    html, body = main (height is min-height)
    flex-shrink: 0;
    display: flex;

    padding-top: $sp-10;
  }
}