$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;

.lt-header {
  header {
    @extend .d-flex,
            .w-100,
            .px-3,
            .align-items-center;
    min-height: $x-header-height-xs;
    @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-logo {
      @extend .flex-1,
              .justify-content-md-center;
    }
  }
}

.x-brand-logo img {
  max-height: $x-logo-sm;
  @include media-breakpoint-up(md) {
    max-height: $x-logo-md;
  }

  // Wide aside
  .is-wide & {
    max-height: $x-logo-md;
    @include media-breakpoint-up(xl) {
      max-height: $x-logo-lg;
    }
  }
}