@import "settings.colors";
@import "settings.fonts";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

.c-card--complete-profile {
  margin: 0;
  padding: rem(15);
  @include display-grid;
  @include grid-template-columns(0, 1fr rem(75));
  @include grid-template-rows(0, grid-repeat(3, auto));

  .c-card__hed {
    @include grid-column(1, 2);
    @include grid-row(1, 2);
    @include font-pratt-bold;
    margin-top: 0;
    margin-bottom: 0;
    color: $color-grey-900;
    letter-spacing: 0;
    font-size: rem(19);
    line-height: line-height(19, 21);
    text-align: left;
    padding-right: rem(15);
  }
}

.c-card--complete-profile__hed,
.c-card--complete-profile__text {
  padding-right: rem(15);
}

.c-card--complete-profile__hed {
  @include grid-column(1, 2);
  @include grid-row(1, 2);
  @include font-pratt-bold;
  margin-top: 0;
  margin-bottom: 0;
  color: $color-grey-900;
  letter-spacing: 0;
  font-size: rem(19);
  line-height: line-height(19, 21);
  text-align: left;
}
.c-card--complete-profile__link {
  text-decoration: underline;
  color: $color-grey-900;
}

.c-card--complete-profile__text {
  @include grid-column(1, 2);
  @include grid-row(2, 3);
  @include font-pratt;
  font-size: rem(16);
  line-height: line-height(16, 22);
  letter-spacing: 0;
  color: $color-grey-900;
  margin-bottom: rem(15);
  margin-top: rem(15);
}

.c-card--complete-profile__button {
  @include grid-column(1, 3);
  @include grid-row(3, 4);
  .c-button {
    width: 100%;
  }
}

.c-card--complete-profile__chart {
  @include grid-column(2, 3);
  @include grid-row(1, 3);
  @include grid-align-self(start);
  margin: 0;
}

.c-card--complete-profile__chart__text {
  @include font-gm-sans;
  font-size: rem(14);
  line-height: line-height(14, 17);
  letter-spacing: rem(0.4);
  color: $color-grey-700;
  text-align: center;
  margin-top: 0;
}
