hy-banner.scss

:host {
  display: block;
}

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

  // >480px
  @include breakpoint($narrow) {
    padding: 40px 0 32px 0;
  }

  // >960px
  @include breakpoint($wide) {
    padding: 48px 0 40px 0;
  }

  // >1200px
  @include breakpoint($extrawide) {
    padding: 64px 0 48px 0;
  }

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

      @include breakpoint($narrow) {
        font-size: 32px;
        letter-spacing: -1.07px;
        line-height: 32px;
        margin-bottom: 24px;
      }

      @include breakpoint($extrawide) {
        font-size: 36px;
        letter-spacing: -1.2px;
        line-height: 36px;
      }

      @include breakpoint($overwide) {
        font-size: 40px;
        letter-spacing: -1.33px;
        line-height: 40px;
        margin-bottom: 32px;
      }
    }

    &__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) {
        font-size: 16px;
        letter-spacing: -0.08px;
        line-height: 24px;
        margin-bottom: 28px;
      }

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

      @include breakpoint($extrawide) {
        font-size: 18px;
        letter-spacing: -0.09px;
        line-height: 24px;
        margin-bottom: 36px;
      }

      @include breakpoint($overwide) {
        margin-bottom: 44px;
      }
    }
  }
}