$x-logo-sm:          1.5rem    !default;
$x-logo-md:          2rem      !default;
$x-logo-lg:          3.438rem  !default;

$x-header-height-xs: 3.5em     !default;
$x-header-height-sm: 6rem      !default;
$x-header-height-md: 7rem      !default;
$x-header-height-lg: 14.5rem   !default;

$x-header-width-sm:  8.5rem     !default;
$x-header-width-md:  16rem     !default;
$x-header-width-lg:  19.688rem !default;

.lt-aside-header {
  @extend .d-flex,
          .w-100,
          .px-3,
          .mb-md-4,
          .align-items-center;
  min-height: $x-header-height-xs;

  .x-aside-theme-dark & {
    @extend %x-theme-dark-aside-mobile;
  }

  @include media-breakpoint-up(md) {
    min-height: $x-header-height-sm;
  }

  .is-wide & {
    min-height: $x-header-height-md;

    @include media-breakpoint-up(xl) {
      min-height: $x-header-height-lg;
    }
  }
  > * {
    @extend .d-flex;
  }
}

.x-brand-wrap {
  @extend .w-100,
          .px-3,
          .justify-content-between,
          .justify-content-md-center,
          .align-items-center;
}

.x-brand-logo {
  max-width: $x-header-width-sm;
  @extend .w-100;

  @include media-breakpoint-up(md) {
    max-width: $x-header-width-lg;
  }

  .is-wide & {
    max-width: $x-header-width-md;
    @include media-breakpoint-up(xl) {
      max-width: $x-header-width-lg;
    }
  }

  img {
    @extend .w-100,
            .h-auto;
  }
}