@import "settings.breakpoints";
@import "settings.colors";

@import "mixins/objects.financial-banner";
@import "mixins/settings.fonts";
@import "mixins/tools.functions";
@import "mixins/tools.mixins";

.o-financial-banner {
  background: $color-blue-600;
  color: $color-white;
  padding: rem(20);
  @include display-grid;
  @include grid-template-rows(grid-repeat(4, auto));
  @include grid-template-columns(1fr);
}

.o-financial-banner__img {
  @include grid-row(1, 2);
  @include grid-column(1, -1);
  padding-bottom: rem(15);
  svg {
    fill: $color-white;
    width: rem(243);
    height: rem(51);
  }
}

.o-financial-banner__desc {
  @include grid-row(2, 3);
  @include grid-column(1, -1);
  @include font-gm-sans;
  padding-bottom: rem(20);
  font-size: 1rem;
  line-height: line-height(16, 17);
  letter-spacing: rem(.4);
}

.o-financial-banner__button {
  @include grid-row(3, 4);
  @include grid-column(1, -1);
  text-align: center;
}

// This element was in the mockups but removed before launch.
// Leaving here as reference in case it gets added back in the future
// .o-financial-banner__link {
//   @include grid-row(4, 5);
//   @include grid-column(1, -1);
//   @include font-gm-sans;
//   text-align: center;
//   ul {
//     display: inline-block;
//     padding-left: 0;
//     margin: 0;
//   }
//   a {
//     color: $color-white;
//     text-decoration: none;
//     text-transform: uppercase;
//     font-size: rem(12);
//     line-height: line-height(12, 13);
//     letter-spacing: rem(1);
//     &:visited {
//       color: $color-white;
//     }
//     &:hover {
//       color: $color-white;
//       text-decoration: underline;
//     }
//     &:focus,
//     &:active {
//       color: $color-white;
//     }
//   }
// }
