@import "tools.mixins";

@mixin c-globe-advisor-reader-tip-sm {
  .c-globe-advisor-reader-tip {
    @include grid-template-rows(0, grid-repeat(4, auto));
    @include grid-template-columns(0, grid-repeat(8, 1fr));
    padding-left: rem(40);
  }

  .c-globe-advisor-reader-tip__label {
    @include grid-row(1, 2);
    @include grid-column(1, -1);
  }

  .c-globe-advisor-reader-tip__hed {
    @include grid-row(2, 3);
    @include grid-column(1, -1);
  }

  .c-globe-advisor-reader-tip__dek {
    @include grid-row(3, 4);
    @include grid-column(1, -1);
    padding-bottom: rem(20);
  }

  .c-globe-advisor-reader-tip__button {
    @include grid-row(4, 5);
    @include grid-column(1, 4);
  }
}

@mixin c-globe-advisor-reader-tip-md {
  .c-globe-advisor-reader-tip {
    @include grid-template-rows(0, grid-repeat(3, auto));
    @include grid-template-columns(0, grid-repeat(12, 1fr));
    padding-left: rem(20);
  }

  .c-globe-advisor-reader-tip__label {
    @include grid-row(1, 2);
    @include grid-column(2, 8);
  }

  .c-globe-advisor-reader-tip__hed {
    @include grid-row(2, 3);
    @include grid-column(2, 8);
    align-self: center;
    font-size: rem(28);

  }

  .c-globe-advisor-reader-tip__dek {
    @include grid-row(3, 4);
    @include grid-column(2, 8);
    padding-bottom: 0;
  }

  .c-globe-advisor-reader-tip__button {
    @include grid-row(2, 3);
    @include grid-column(9, 12);
    align-self: center;
  }
}

@mixin c-globe-advisor-reader-tip-lg {
  .c-globe-advisor-reader-tip {
    @include grid-template-columns(0, grid-repeat(16, 1fr));
  }

  .c-globe-advisor-reader-tip__label {
    @include grid-column(3, 11);
  }

  .c-globe-advisor-reader-tip__hed {
    @include grid-column(3, 11);
  }

  .c-globe-advisor-reader-tip__dek {
    @include grid-column(3, 11);
  }

  .c-globe-advisor-reader-tip__button {
    @include grid-column(12, 15);
  }
}
