.x-narrow {
  @extend %mx-auto;
  max-width: 30rem;
}

.x-narrow-md {
  @extend %mx-auto;
  max-width: 45rem;
}

.x-narrow-lg {
  @extend %mx-auto;
  max-width: 55rem;
}

.x-form-header {
  @extend %mb-3;

  &.is-center {
    @extend %text-center,
            %d-flex,
            %flex-column,
            %align-items-center,
            %justify-content-center;
  }

  @include media-breakpoint-up(md) {
    margin-bottom: 3rem;
  }

  .x-form-title {
    font-size: $h3-font-size;
    @include media-breakpoint-up(md) {
      font-size: $h2-font-size;
    }
  }

  .x-form-subtitle {
    @extend %text-info;
    font-size: $font-size-base;
    @include media-breakpoint-up(md) {
      font-size: $font-size-lg;
    }
  }
}

.x-login {
  @extend %d-flex,
          %h-100,
          %py-5,
          %px-4,
          %align-items-md-center,
          %justify-content-md-center;
}

.x-form-login {
  @extend %d-flex,
          %flex-column,
          %w-100,
          .x-narrow;

  .form-control {
    border-radius: $border-radius;
  }

  .x-label-info {
    @extend %w-100;

    span {
      @extend %ml-auto;
      font-size: $font-size-xs;
    }
  }
}