
.container {
  padding-top: $grid-gutter-width;
  padding-bottom: $grid-gutter-width;
}


.section {
  position: relative;
  //padding-top: $grid-gutter-width * 2;
  //padding-bottom: $grid-gutter-width * 2;

  .background {
    @extend .hero-bg;
    position: absolute;

  }

  @each $color, $value in $colors {
    &.#{$color} {
      background-color: $value;
      color: color-yiq($value, $body-color, scale_color($value, $lightness: +90%));

      h1, h2, h3, h4, h5 {
        color: color-yiq($value, scale_color($value, $lightness: +90%), $primary);
      }
    }

  }

}


.col + .col {
  margin-top: $grid-gutter-width;
  @include media-breakpoint-up(md) {
    margin-top: inherit;
  }
}


.section {
  &-top,
  &-metanav,
  &-nav,
  &-pagetitle,
  &-subnav,
  &-hero,
  &-footer,
  &-bottom {
    &, & .container {
      padding-top: inherit;
      padding-bottom: inherit;
      margin-top: inherit;
      margin-bottom: inherit;
    }
  }
}


.backendlayout-sidebar, .backendlayout-sidebar-sectionnav {

  main {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: center;
  }

  .section-hero {
    flex: 1 0 100%;
  }
}


.sidebar-wrapper {
  flex: 1 0 auto;
  @include media-breakpoint-up(lg) {
    flex: 4 1;
  }

  @include media-breakpoint-up(lg) {
    margin-right: $grid-gutter-width;
  }

  max-width: calc(100% - #{$grid-gutter-width});
  @each $breakpoint, $width in $container-max-widths {
    @include media-breakpoint-up($breakpoint) {
      max-width: ($width / 12 * 4) - $grid-gutter-width;
    }
  }
}


.content-wrapper {
  flex: 1 0 auto;
  @include media-breakpoint-up(lg) {
    flex: 8 1;
  }

  @include media-breakpoint-up(lg) {
    //margin-left: $grid-gutter-width/2;
  }

  max-width: calc(100% - #{$grid-gutter-width});
  @each $breakpoint, $width in $container-max-widths {
    @include media-breakpoint-up($breakpoint) {
      max-width: ($width / 12 * 8) - $grid-gutter-width;
    }
  }

  .col {
    @include media-breakpoint-down(md) {
      flex: none;
    }
  }

}
