.x-aside-header {
  @extend %x-flex-center,
          %w-100;
}

.x-aside-main {
  @extend %flex-1;

  .is-wide & {
    @include media-breakpoint-up(md) {
      margin-top: -5.5rem;
      flex: none;
    }
  }
}

.x-aside-header,
.x-aside-footer,
.x-aside-main {

  .is-wide & {
    @extend %x-aside-spacing;
  }
}

%x-aside-spacing {
  @extend %px-3,
          %px-md-4,
          %px-xl-5;
}