.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 {
    @extend .text-primary-lighter;
    font-size: $h3-font-size;
    @include media-breakpoint-up(md) {
      font-size: $h2-font-size;
    }
  }

  .x-form-subtitle {
    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;
    }
  }
}