@import "settings.breakpoints";
@import "settings.colors";
@import "mixins/components.globe-advisor-reader-tip";
@import "mixins/settings.fonts";
@import "mixins/tools.functions";
@import "mixins/tools.mixins";

.c-globe-advisor-reader-tip {
  background: $color-gold-100;
  padding: rem(20);
  @include display-grid;
  @include grid-template-rows(0, grid-repeat(4, auto));
  @include grid-template-columns(0, grid-repeat(0, auto));
}

.c-globe-advisor-reader-tip__label {
  @include grid-row(1, 2);
  @include grid-column(1, -1);
  @include font-gm-sans-bold;
  font-size: rem(12);
  letter-spacing: rem(1);
  line-height: 1;
  color: $color-grey-900;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: rem(10);
  padding: 0;
}

.c-globe-advisor-reader-tip__hed {
  @include grid-row(2, 3);
  @include grid-column(1, -1);
  @include font-pratt-bold;
  font-size: rem(21);
  line-height: line-height(21, 23);
  letter-spacing: 0;
  color: $color-grey-900;
  padding-bottom: rem(10);
}

.c-globe-advisor-reader-tip__dek {
  @include grid-row(3, 4);
  @include grid-column(1, -1);
  @include font-gm-sans;
  font-size: rem(14);
  line-height: line-height(14, 18);
  letter-spacing: rem(0.3);
  color: $color-grey-900;
  padding-bottom: rem(10);
}

.c-globe-advisor-reader-tip__button {
  @include grid-row(4, 5);
  @include grid-column(1, -1);
  text-align: center;
  .c-button {
    color: $color-white;
    background-color: $color-grey-800;
  }
}
