//
// two column layout
//

.side-bar {
  z-index: 1;
  display: flex;
  flex-wrap: wrap;

  @include mq(md) {
    width: $nav-width-md;
    flex-wrap: nowrap;
    position: fixed;
    height: 100%;
  }

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

.main {
  height: 100%;

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

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

.main-content-wrap { 
  @include container;
  
  display: flex;
  flex-direction: column;

  padding-top: $gutter-spacing-sm;
  padding-bottom: $gutter-spacing-sm;

  min-height: 100vh;

  @include mq(md) {
    padding-top: $gutter-spacing;
    padding-bottom: $gutter-spacing;
  }
}

.entry-body {
  padding: $sp-3;
}