/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
.homepage .gradient-banner {
  /** on devices which are larger than 1200px add the gradient.
      if the banner color is changed then change the gradient too.
    */ }
  @media screen and (min-width: 40em) {
    .homepage .gradient-banner {
      position: relative;
      margin: 0 auto;
      background-repeat: no-repeat;
      background-position: bottom;
      max-width: 90rem;
      min-height: 370px;
      background-image: url("/assets/insurance-advisor/images/homepage-banner-desktop.jpg"); } }
  @media screen and (min-width: 90em) {
    .homepage .gradient-banner .gradient-banner-fade-left {
      width: 15%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-image: -webkit-gradient(linear, left top, right top, from(white), to(rgba(255, 255, 255, 0)));
      background-image: linear-gradient(to right, white, rgba(255, 255, 255, 0)); }
    .homepage .gradient-banner .gradient-banner-fade-right {
      width: 15%;
      height: 100%;
      position: absolute;
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
      top: 0;
      right: 0;
      background-image: -webkit-gradient(linear, left top, right top, from(white), to(rgba(255, 255, 255, 0)));
      background-image: linear-gradient(to right, white, rgba(255, 255, 255, 0)); } }
  @media screen and (min-width: 64em) {
    .homepage .gradient-banner .banner-text-wrapper {
      width: 95%;
      margin: 0 auto;
      max-width: 1200px;
      padding-top: 51px;
      padding-left: 40px; } }
  .homepage .gradient-banner .banner-text-wrapper .banner-heading,
  .homepage .gradient-banner .banner-text-wrapper .banner-copy {
    max-width: 352px; }