/* Banner */
.short-banner {
  @include breakout;
  &-inner {
    .short-banner-content {
      padding-top: rem-calc(50);
      padding-bottom: rem-calc(50);
      h1 {
        margin-bottom: rem-calc(15);
        color: $primary-shade;
      }
      h2 {
        margin-bottom: rem-calc(15);
        color: $secondary-shade;
      }
      p {
        font-size: rem-calc(20);
        line-height: rem-calc(32);
      }
    }
    .short-banner-image {
      div {
        height: 100%;
        margin: 0;
      }
      .field--type-image {
        img {
          margin: 0;
          object-fit: cover;
          height: 100%;
        }
      }
    }
  }
}

/* For mobile devices. */
@media only screen and (max-width: 765px) {
  .short-banner-title {
      font-size: rem-calc(28);
      line-height: rem-calc(30);
  }
  .short-banner-sub-title {
      font-size: rem-calc(20);
  }
}

/* For iPad devices */
@media only screen and (min-width: 768px) and (max-width: 1024px)  {
        .short-banner-title {
          font-size: rem-calc(58);
        }
  }


/* Banner */
.banner-background {
  @include breakout;

  padding: rem-calc(102 0);
  height: auto;

  &.banner-color {
    &-light {
      background-color: $gray-lightest !important;
      color: $body-color;
      padding: 0;
    }
    &-primary {
      background-color: $primary-shade !important;
      color: $white;
      padding: 0;
      h1, h2 {
        color: $white;
      }
    }
    &-secondary {
      background-color: $secondary-shade !important;
      color: $white;
      padding: 0;
      h1, h2 {
        color: $white;
      }
    }
    &-white {
      background-color: $white !important;
      color: $body-color;
      padding: 0;
    }
  }
  &.image-left {
    background-size: 45% 100% !important;
    background-position: left !important;
  }
  &.image-right {
    background-size: 45% 100% !important;
    background-position: right !important;
  }
  &.image-left,
  &.image-right {
    .banner-inner {
      img {
        width: 100%;
      }
    }
  }
  &.image-full {
    .banner-inner {
      .banner-content {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        h1, p, .subheading {
          color: $white;
          text-shadow: 0 0 rem-calc(8) $black, 0 0 rem-calc(20) $black;
        }
      }
      .banner-img {
        position: relative;
        left: 0;
        width: 100vw;
        height: auto;
        .field--type-entity-reference {
          margin: 0;
          picture {
            width: 100%;
            display: block;
          }
          img {
            margin: 0;
            width: 100%;
          }
        }
      }
    }
  }
  .container .container {
    padding: 0;
  }
  .banner-inner {
    height: 100%;
    align-items: center;
    .banner-content {
      padding: rem-calc(50 0);
      .banner-title {
        @include text-style-display-headline-display;
        height: max-content;
      }
      .banner-body {
        @include text-style-subheadline-sub-1;
        height: max-content;
      }
      .subheading {
        @include text-style-eyebrow-eyebrow-1();
        color: $secondary-shade;
      }
      h1 {
        margin-bottom: rem-calc(30);
      }
      p {
        font-size: rem-calc(18);
        line-height: rem-calc(32);
        font-weight: 500;
      }
    }
  }

  .smaller-banner & {
    padding: rem-calc(75 0);
    height: auto;
  }
}

// For mobile devices.
@media (min-width: 300px) and (max-width: 900px) {
  .banner-background {
    h1 {
      font-size: rem-calc(28);
      line-height: rem-calc(30);
    }
    .banner-title {
      width: 100% !important;
      font-size: rem-calc(28) !important;
      line-height: rem-calc(30) !important;
    }
    .banner-body {
      width: 100% !important;
      font-size: rem-calc(16) !important;
      line-height: rem-calc(32) !important;
    }
  }
  .banner-inner .banner-content p{
      font-size: rem-calc(16);
      line-height: rem-calc(32);
  }
}

// For iPad devices.
@media (min-width: 910px) and (max-width: 1400px) {
  .banner-background {
    .banner-title {
      font-size: rem-calc(28) !important;
      line-height: rem-calc(30) !important;
    }
  }
}
