@import '../helpers/helpers';

h1 {
  margin-bottom: 40px;
}

.returning-customer-wrapper,
.new-customer-wrapper {
  @include make-col-ready;
  background-color: $white;

  @include media-breakpoint-down(sm) {
    @include make-col(12);
    background-color: $gray-bg;
  }

  @include media-breakpoint-up(md) {
    @include make-col(12);
  }

  @include media-breakpoint-up(lg) {
    @include make-col(6);
  }
}

.returning-customer-wrapper {
  @include media-breakpoint-down(md) {
    margin-bottom: 30px;
  }
  //combines md & sm states
}

.returning-customer,
.new-customer {
  background-color: $gray-bg;
  padding-top: 30px;
  padding-bottom: 30px;
  height: 100%;

  @include media-breakpoint-up(md) {
    padding: 40px 60px;
  }

  @include media-breakpoint-up(lg) {
    padding: 40px 80px;
  }

  &__info {
    span {
      display: block;
    }
  }
}

.returning-customer {
  .form-row {
    &:first-child {
      margin-bottom: 30px;
    }
  }
}

.returning-customer__forgot-link + .form-row {
  margin-top: 20px;
}