
.backendlayout-sidebar {

  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;
    order: 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;
    order: 2;
  }

  @include media-breakpoint-up(lg) {
    margin-left: $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 * 8) - $grid-gutter-width;
    }
  }

}
