hy-banner.scss

:host {
  display: block;
}

.hy-banner {
  background-color: var(--brand-main-light);
  padding: 28px 0 24px 0;

  @include breakpoint($narrow) {
    padding: 40px 0 32px 0;
  }
  @include breakpoint($wide) {
    padding: 48px 0 40px 0;
  }
  @include breakpoint($extrawide) {
    padding: 48px 0 40px 0;
  }
  @include breakpoint($overwide) {
    //padding: 64px 0 48px 0;
    padding: 64px 32px 48px 32px;
  }

  &__info-container {
    &__title {
      @include font-size(24px, 24px);
      color: var(--grayscale-white);
      font-family: var(--main-font-family);
      font-weight: 600;
      letter-spacing: -0.8px;
      margin-bottom: 16px;
      text-transform: uppercase;

      @include breakpoint($narrow) {
        @include font-size(32px, 32px);
        letter-spacing: -1.07px;
        margin-bottom: 24px;
        max-width: 92%;
      }

      @include breakpoint($extrawide) {
        @include font-size(32px, 32px);
        letter-spacing: -1.07px;
        margin-bottom: 24px;
        max-width: 92%;
      }

      @include breakpoint($overwide) {
        @include font-size(36px, 36px);
        letter-spacing: -1.2px;
        max-width: 83%;
      }
    }

    &__description {
      color: var(--grayscale-white);
      font-family: var(--main-font-family);
      font-weight: 500;
      font-size: 14px;
      letter-spacing: -0.7px;
      line-height: 20px;
      margin-bottom: 24px;

      @include breakpoint($narrow) {
        @include font-size(16px, 24px);
        letter-spacing: -0.08px;
        margin-bottom: 28px;
        max-width: 92%;
      }

      @include breakpoint($wide) {
        margin-bottom: 32px;
      }

      @include breakpoint($overwide) {
        @include font-size(18px, 24px);
        letter-spacing: -0.09px;
        margin-bottom: 36px;
        max-width: 83%;
      }
    }
  }
}

// Big screen, no sidebar
.hy-banner.large {
  @include breakpoint($extrawide) {
    padding: 64px 0 48px 0;

    &__info-container {
      &__title {
        @include font-size(36px, 36px);
        letter-spacing: -1.2px;
        max-width: 83%;
      }
      &__description {
        @include font-size(18px, 24px);
        letter-spacing: -0.09px;
        margin-bottom: 36px;
        max-width: 83%;
      }
    }
  }
  @include breakpoint($overwide) {
    padding: 64px 0 48px 0;
    &__info-container {
      &__title {
        @include font-size(40px, 40px);
        letter-spacing: -1.33px;
        margin-bottom: 32px;
        max-width: 83%; //10col
      }
      &__description {
        margin-bottom: 44px;
      }
    }
  }
}