@import "tools.mixins";

@mixin o-financial-banner-sm {
  .o-financial-banner {
    @include grid-template-rows(0, grid-repeat(2, auto));
    @include grid-template-columns(0, 1fr 1fr);
  }

  .o-financial-banner__img {
    @include grid-row(1, 2);
    @include grid-column(1, 2);
  }

  .o-financial-banner__desc {
    @include grid-row(2, 3);
    @include grid-column(1, 2);
    padding-bottom: 0;
  }

  .o-financial-banner__button {
    @include grid-row(1, 2);
    @include grid-column(2, 3);
    padding-left: rem(20);
  }

  // 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(2, 3);
  //   @include grid-column(2, 3);
  // }
}

@mixin o-financial-banner-md {
  .o-financial-banner {
    @include grid-template-rows(0, 1fr);
    @include grid-template-columns(0, grid-repeat(3, auto));
  }

  .o-financial-banner__img {
    @include grid-row(1, -1);
    @include grid-column(1, 2);
    padding-bottom: 0;
    padding-right: rem(30);
  }

  .o-financial-banner__desc {
    @include grid-row(1, -1);
    @include grid-column(2, 3);
    align-self: center;
    padding-bottom: 0;
    padding-right: rem(30);
  }

  .o-financial-banner__button {
    @include grid-row(1, -1);
    @include grid-column(3, 4);
    align-self: center;
    padding-bottom: 0;
    padding-left: 0;
  }

  // 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(1, -1);
  //   @include grid-column(4, 5);
  //   align-self: center;
  // }
}

@mixin o-financial-banner-lg {
  .o-financial-banner {
    @include grid-template-rows(0, 1fr);
    @include grid-template-columns(0, rem(334) grid-repeat(2, auto));
  }

  .o-financial-banner__img {
    @include grid-row(1, -1);
    @include grid-column(1, 2);
    padding-bottom: 0;
    padding-right: rem(30);
    svg {
      width: rem(304);
      height: rem(60);
    }
  }

  .o-financial-banner__desc {
    @include grid-row(1, -1);
    @include grid-column(2, 3);
    padding-bottom: 0;
    padding-right: rem(220);
  }

  .o-financial-banner__button {
    @include grid-row(1, -1);
    @include grid-column(3, 4);
    padding-bottom: 0;
    padding-right: 0;
  }

  // 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(1, -1);
  //   @include grid-column(4, 5);
  // }
}
