.block.content-banner {
  background: var(--corp-content-blue);
  /* height: 100vh; */
  min-height: 420px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  @media (width >=768px) {
    min-height: 310px;
    padding: 60px;
    text-align: center;
    align-items: center;
  }
  @media (width >=1200px) {
    min-height: 543px;
  }

  /* Subtitle */
  .content-banner__subtitle {
    color: var(--corp-color-surface-secondary);
    margin: 0 0 24px;
    margin-bottom: var(--corp-type-desktop-body-xs-font-size);
    font-size: var(--corp-type-mobile-body-1-font-size);
    font-weight: var(--corp-type-mobile-body-1-font-weight);
    line-height: var(--corp-type-mobile-body-1-line-height);

    @media (width >=768px) {
      font-size: var(--corp-type-desktop-body-xs-font-size);
      line-height: var(--corp-type-desktop-body-xs-line-height);
    }

    @media (width >=1200px) {
      font-size: var(--corp-type-desktop-body-5-font-size);
      font-weight: var(--corp-type-desktop-body-5-font-weight);
      line-height: var(--corp-type-desktop-body-5-line-height);
      margin-bottom: 24px;
    }
  }

  /* Title */
  .content-banner__title {
    color: var(--corp-color-white);
    margin: 0 0 24px;
    font-size: var(--corp-type-mobile-display-2-font-size);
    font-weight: var(--corp-type-mobile-display-2-font-weight);
    line-height: var(--corp-type-mobile-display-2-line-height);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

    @media (width >=768px) {
      font-size: var(--corp-type-tablet-display-l-font-size);
      font-weight: var(--corp-type-tablet-display-l-font-weight);
      line-height: var(--corp-type-tablet-display-l-line-height);
      margin-bottom: 12px;
    }

    @media (width >=1200px) {
      font-size: var(--corp-type-desktop-heading-xl-font-size);
      font-weight: var(--corp-type-desktop-heading-xl-font-weight);
      line-height: var(--corp-type-desktop-heading-xl-line-height);
      margin-bottom: 16px;
    }
  }

  /* Description */
  .content-banner__description {
    color: var(--corp-color-white);
    margin: 0;
    font-size: var(--corp-type-mobile-body-2-font-size);
    font-weight: var(--corp-type-mobile-body-2-font-weight);
    line-height: var(--corp-type-mobile-body-2-line-height);

    @media (width >=768px) {
      font-size: var(--corp-type-tablet-body-2-font-size);
      font-weight: var(--corp-type-tablet-body-2-font-weight);
      line-height: var(--corp-type-tablet-body-2-line-height);
    }

    @media (width >=1200px) {
      font-size: var(--corp-type-desktop-heading-6-font-size);
      font-weight: var(--corp-type-desktop-heading-6-font-weight);
      line-height: var(--corp-type-desktop-heading-6-line-height);
    }
  }

  /* Career variant */
  &.career-content {
    background: var(--corp-content-pastel);
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
    padding: 40px 20px;
    justify-content: center;
    align-items: flex-start;
    text-align: left;

    @media (width >=768px) {
      padding: 60px;
    }

    @media (width >=1200px) {
      padding-inline: var(--container-margin);
    }

    &>div:nth-child(2) {
      display: none;
    }

    /* Shared overrides */
    .content-banner__subtitle {
      color: var(--corp-color-neutral-charcoal-gray);
      opacity: 1;
      margin-bottom: var(--corp-space-xl);
      font-size: var(--corp-type-mobile-tag-1-font-size);
      font-weight: var(--corp-type-mobile-tag-1-font-weight);
      line-height: var(--corp-type-mobile-tag-1-line-height);
      text-transform: uppercase;
    }

    .content-banner__description {
      color: var(--corp-color-neutral-black);
      margin: 0;
      max-width: 100%;
      font-size: var(--corp-type-mobile-heading-xl-font-size);
      font-weight: var(--corp-type-mobile-heading-xl-font-weight);
      line-height: var(--corp-type-mobile-heading-xl-line-height);
      letter-spacing: -0.2px;

      strong {
        color: var(--corp-color-primary);
        font-weight: var(--corp-type-mobile-heading-xl-font-weight);
      }
    }

    /* Tablet */
    @media (width >=768px) {
      .content-banner__subtitle {
        font-size: var(--corp-type-tablet-body-lg-font-size);
        line-height: var(--corp-type-tablet-body-8-line-height);
      }

      .content-banner__description {
        font-size: var(--corp-type-tablet-display-font-size);
        font-weight: var(--corp-type-tablet-display-font-weight);
        line-height: var(--corp-type-tablet-display-line-height);
        letter-spacing: var(--corp-cta-letter-spacing-primary);
        text-transform: capitalize;
      }
    }

    /* Desktop */
    @media (width >=1200px) {
      .content-banner__subtitle {
        font-size: var(--corp-type-desktop-heading-4-font-size);
        font-weight: var(--corp-type-desktop-heading-4-font-weight);
        line-height: var(--corp-type-desktop-heading-4-line-height);
      }
      .content-banner__description {
        font-size: var(--corp-type-desktop-heading-xxl-font-size);
        font-weight: var(--corp-type-desktop-heading-xxl-font-weight);
        line-height: var(--corp-type-desktop-heading-xxl-line-height);
        letter-spacing: -1.5px;
        text-transform: none;
      }
    }
  }

  /* Training page variant */
  &.training-page-banner {
    background: var(--corp-color-primary);
    min-height: 100vh;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 0;

    @media (width >=768px) {
      padding: 0;
    }

    @media (width >=1200px) {
      padding-top: 0px;
    }

    /* Subtitle */
    .content-banner__subtitle {
      color: var(--corp-color-surface-tertiary);
      opacity: 0.4;
      font-size: var(--corp-type-mobile-body-1-font-size);
      font-weight: var(--corp-type-mobile-body-1-font-weight);
      line-height: var(--corp-type-mobile-body-1-line-height);
      margin-top: 58px;
      margin-bottom: 16px;
      text-transform: uppercase;

      @media (width >=768px) {
        margin-bottom: 12px;
        font-size: var(--corp-type-tablet-body-1-font-size);
        font-weight: var(--corp-type-tablet-body-1-font-weight);
        line-height: var(--corp-type-tablet-body-1-line-height);
        letter-spacing: -0.12px;
      }

      @media (width >=1200px) {
        font-size: var(--corp-type-desktop-heading-4-font-size);
        font-weight: var(--corp-type-desktop-heading-4-font-weight);
        line-height: var(--corp-type-desktop-heading-4-line-height);
        margin-bottom: 20px;
        letter-spacing: -0.4px;
      }
    }

    &>div:nth-child(2) {
      width: 96%;
    }

    &>div:nth-child(2)>div {
      width: 100%;
    }

    /* Title */
    .content-banner__title {
      display: inline-block;
      color: var(--corp-color-surface-tertiary);
      border-radius: 10px;
      margin-bottom: 20px;
      font-size: var(--corp-type-mobile-display-1-font-size);
      font-weight: var(--corp-type-mobile-display-1-font-weight);
      line-height: var(--corp-type-mobile-display-5-line-height);
      letter-spacing: -0.56px;

      @media (width >=768px) {
        max-width: 100%;
        font-size: var(--corp-type-tablet-display-l-font-size);
        font-weight: var(--corp-type-tablet-display-l-font-weight);
        line-height: var(--corp-type-tablet-display-l-line-height);
        border-radius: 16px;
        margin-bottom: 20px;
      }

      @media (width >=1200px) {
        font-size: var(--corp-type-desktop-display-font-size);
        font-weight: var(--corp-type-desktop-display-font-weight);
        line-height: var(--corp-type-desktop-display-line-height);
        margin-bottom: 28px;
      }
    }

    &>div:nth-child(3),
    &>div:nth-child(3)>div {
      width: 100%;
    }

    @media (width >=768px) {

      &>div:nth-child(3),
      &>div:nth-child(3)>div {
        width: 80%;
      }
    }

    @media (width >=1200px) {

      &>div:nth-child(3),
      &>div:nth-child(3)>div {
        width: 80%;
      }
    }

    /* Description */
    .content-banner__description {
      color: var(--corp-color-white);
      text-align: left;
      font-size: var(--corp-type-mobile-body-2-font-size);
      font-weight: var(--corp-type-mobile-body-2-font-weight);
      line-height: var(--corp-type-mobile-body-2-line-height);
      letter-spacing: -0.14px;

      @media (width >=768px) {
        font-size: var(--corp-type-tablet-body-2-font-size);
        font-weight: var(--corp-type-tablet-body-2-font-weight);
        line-height: var(--corp-type-tablet-body-2-line-height);
      }

      @media (width >=1200px) {
        font-size: var(--corp-type-desktop-body-lg-font-size);
        font-weight: var(--corp-type-desktop-body-lg-font-weight);
        line-height: var(--corp-type-desktop-body-lg-line-height);
        letter-spacing: -0.16px;
      }
    }

    .wrapper {
      position: relative;
    }

    .image-logo {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;

      @media (width >=768px) {
        position: absolute;
        right: 20px;
        bottom: -5px;
      }

      @media (width >=1200px) {
        position: absolute;
        right: 50px;
        bottom: -5px;
      }
    }

    /* Logo/Image */
    .button-container {
      width: 74px;
      height: 74px;
      object-fit: contain;
      margin-top: 30px;

      @media (width >=500px) and (width<=768px) {
        width: 74px;
        height: 74px;
      }

      @media (width >=768px) {
        width: 140px;
        height: 140px;
        margin: 0;
      }

      @media (width >=1200px) {
        width: 200px;
        height: 200px;
        margin: 0;
      }

      img {
        display: block;
        aspect-ratio: 1/1;
        width: 100%;
        height: 100%;
      }
    }
  }

  /* Terms page title variant */ 
  &.terms-page-banner,
  &.overlay-centered-banner {
    height: auto;
    min-height: 420px;
    padding: 119.5px 20px 36px;
    row-gap: 0;

    .content-banner__subtitle {
      color: var(--corp-color-surface-tertiary);
      margin: 0;
      padding-bottom: 16px;
      opacity: 0.4;
      font-size: var(--corp-type-mobile-body-1-font-size);
      font-weight: var(--corp-type-mobile-body-3-font-weight);
      line-height: var(--corp-type-mobile-body-1-line-height);
    }

    .content-banner__title {
      color: var(--corp-color-surface-tertiary);
      font-size: var(--corp-type-mobile-display-2-font-size);
      font-weight: var(--corp-type-mobile-display-2-font-weight);
      line-height: var(--corp-type-mobile-display-5-line-height);
      letter-spacing: -0.56px;
    }

    .content-banner__description {
      color: var(--corp-color-white);
      font-size: var(--corp-type-mobile-body-2-font-size);
      font-weight: var(--corp-type-mobile-body-2-font-weight);
      line-height: var(--corp-type-mobile-body-2-line-height);
      letter-spacing: -0.14px;
    }

    & > div:nth-child(3) p {
      margin: 0;
      color: var(--corp-color-white);
      font-size: var(--corp-type-mobile-body-2-font-size);
      font-weight: var(--corp-type-mobile-body-2-font-weight);
      line-height: var(--corp-type-mobile-body-2-line-height);
      letter-spacing: -0.14px;

      @media (width < 768px) {
        display: inline;
      }
    }

    @media (width >=768px) {
      height: auto;
      min-height: 310px;
      padding: 100px 60px 36px;
      text-align: center;

      .content-banner__subtitle {
        font-size: var(--corp-type-tablet-body-1-font-size);
        line-height: var(--corp-type-tablet-heading-xl-line-height);
        letter-spacing: -0.12px;
        padding-bottom: 12px;
      }

      .content-banner__title {
        color: var(--corp-color-white);
        font-size: var(--corp-type-tablet-display-font-size);
        font-weight: var(--corp-type-tablet-display-font-weight);
        line-height: var(--corp-type-tablet-display-line-height);
        letter-spacing: -0.42px;
      }

      .content-banner__description {
        color: var(--corp-color-white);
        font-size: var(--corp-type-tablet-body-2-font-size);
        font-weight: var(--corp-type-tablet-body-1-font-weight);
        line-height: var(--corp-type-tablet-body-10-line-height);
        letter-spacing: 0;
      }

      & > div:nth-child(3) {
        p {
          color: var(--corp-color-white);
          font-size: var(--corp-type-tablet-body-2-font-size);
          font-weight: var(--corp-type-tablet-body-1-font-weight);
          line-height: var(--corp-type-tablet-body-10-line-height);
          letter-spacing: 0;
        }
      }
    }

    @media (width >= 1200px) {
      height: auto;
      min-height: 543px;
      padding: 166px 60px 36px;

      .content-banner__subtitle {
        color: var(--corp-color-white);
        letter-spacing: -0.4px;
        padding-bottom: 24px;
        font-size: var(--corp-type-desktop-heading-4-font-size);
        font-weight: var(--corp-type-desktop-heading-4-font-weight);
        line-height: var(--corp-type-desktop-heading-4-line-height);
      }

      .content-banner__title {
        font-size: var(--corp-type-desktop-display-font-size);
        font-weight: var(--fw-300);
        font-style: normal;
        line-height: 72px; /* 120% */
      }

      .content-banner__description {
        color: var(--corp-color-white);
        font-size: var(--corp-type-desktop-heading-5-font-size);
        font-weight: var(--corp-type-desktop-heading-5-font-weight);
        letter-spacing: -0.54px;
        line-height: var(--corp-type-desktop-caption-5-line-height);
      }

      & > div:nth-child(3) {
        p {
          color: var(--corp-color-white);
          font-size: var(--corp-type-desktop-heading-5-font-size);
          font-weight: var(--corp-type-desktop-heading-5-font-weight);
          letter-spacing: -0.54px;
          line-height: var(--corp-type-desktop-caption-5-line-height);
        }
      }
    }
  }

  &.overlay-centered-banner {
    margin-bottom: -70px;

    @media screen and (width >=1024px) {
      margin-bottom: -120px;
      min-height: 523px;
      padding: 0 60px 36px;
    }
  }

  /* Impact page quotes variant */
  &.impact-page-quotes {
    background: var(--corp-color-white);
    height: auto;
    padding: 60px 20px 85px;
    align-items: stretch;
    text-align: left;

    .content-banner__title {
      color: var(--corp-color-neutral-black);
      margin: 0;
      font-size: var(--corp-type-mobile-display-2-font-size);
      font-weight: var(--corp-type-mobile-display-2-font-weight);
      line-height: var(--corp-type-mobile-display-5-line-height);
      letter-spacing: -0.56px;
      display: block;
      -webkit-line-clamp: unset;
      overflow: visible;
    }

    .content-banner__subtitle {
      color: var(--corp-color-neutral-black);
      margin: 32px 0 0;
      font-size: var(--corp-type-mobile-tag-1-font-size);
      font-weight: var(--corp-type-mobile-tag-1-font-weight);
      line-height: var(--corp-type-mobile-body-2-line-height);
      text-transform: uppercase;
      opacity: 0.4;
    }

    @media (width >=768px) {
      padding: 54px 20px 148px;
      justify-content: center;

      .content-banner__title {
        font-size: var(--corp-type-tablet-display-font-size);
        font-weight: var(--corp-type-tablet-display-font-weight);
        line-height: var(--corp-type-tablet-display-line-height);
        letter-spacing: -0.42px;
      }

      .content-banner__subtitle {
        margin-top: 36px;
        font-size: var(--corp-type-tablet-heading-1-font-size);
        font-weight: var(--corp-type-tablet-heading-1-font-weight);
        line-height: var(--corp-type-tablet-body-8-line-height);
      }
    }

    @media (width >=1200px) {
      padding: 247px 239px 245px 60px;

      .content-banner__title {
        font-size: var(--corp-type-desktop-heading-xxl-font-size);
        font-weight: var(--corp-type-desktop-heading-xxl-font-weight);
        line-height: var(--corp-type-desktop-caption-6-line-height);
        letter-spacing: -1.5px;
      }

      .content-banner__subtitle {
        font-size: var(--corp-type-desktop-heading-4-font-size);
        font-weight: var(--corp-type-desktop-heading-4-font-weight);
        line-height: var(--corp-type-desktop-heading-4-line-height);
        letter-spacing: -0.4px;
      }
    }
  }

  &.press-release-banner {
    text-align: left;
    align-items: flex-start;
    max-height: 418px;
    margin-bottom: -141px;

    @media (width >=768px) {
      max-height: 533px;
      margin-bottom: -82px;
      margin-top: var(--nav-height);
    }

    .content-banner__subtitle {
      display: none;

      @media (width >=768px) {
        display: block;
      }
    }
  }

  /* Meet Our People page banner variant */
  &.single-line-title-banner {
    background: var(--corp-content-blue);
    align-items: stretch;
    text-align: left;
    margin: 0;

    @media (width>=768px) {
      padding: 32px;
    }

    @media (width>=1200px) {
      padding: 60px;
    }

    .content-banner__title {
      color: var(--corp-color-surface-100);
      font-size: var(--corp-type-mobile-display-1-font-size);
      font-weight: var(--corp-type-mobile-display-1-font-weight);
      line-height: var(--corp-type-mobile-display-5-line-height);
      letter-spacing: -0.56px;

      @media (width >=768px) {
        margin: 0;
        color: var(--corp-color-white);
        font-size: var(--corp-type-tablet-display-l-font-size);
        font-weight: var(--corp-type-tablet-display-l-font-weight);
        line-height: var(--corp-type-tablet-display-l-line-height);
      }

      @media (width >=1200px) {
        font-size: var(--corp-type-desktop-display-font-size);
        font-weight: var(--corp-type-desktop-display-font-weight);
        line-height: var(--corp-type-desktop-display-line-height);
      }
    }
  }

  /* S-CNG technology and infotainment variant */
  &.title-content {
    background: var(--corp-color-white);
    height: auto;
    min-height: auto;
    padding: 70px 20px 58px;
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;

    &>div:nth-child(2),
    &>div:nth-child(4) {
      display: none;
    }

    .content-banner__subtitle {
      color: var(--corp-color-primary);
      opacity: 1;
      margin: 0 0 20px;
      font-size: var(--corp-type-mobile-tag-1-font-size);
      font-weight: var(--corp-type-mobile-tag-1-font-weight);
      line-height: var(--corp-type-mobile-tag-1-line-height);
      text-transform: uppercase;
    }

    .content-banner__description {
      color: var(--corp-color-neutral-black);
      margin: 0;
      font-size: var(--corp-type-mobile-heading-1-regular-font-size);
      font-weight: var(--corp-type-mobile-heading-1-regular-font-weight);
      line-height: var(--corp-type-mobile-heading-1-regular-line-height);
      letter-spacing: -0.16px;
    }

    @media (width >=768px) {
      padding: 50px 22px 81px 32px;

      .content-banner__subtitle {
        margin-bottom: 16px;
        font-size: var(--corp-type-tablet-heading-2-font-size);
        font-weight: var(--corp-type-tablet-heading-2-font-weight);
        line-height: var(--corp-type-tablet-heading-2-line-height);
      }

      .content-banner__description {
        font-size: var(--corp-type-tablet-display-sm-font-size);
        font-weight: var(--corp-type-tablet-display-sm-font-weight);
        line-height: var(--corp-type-tablet-display-sm-line-height);
        letter-spacing: 0;
      }
    }

    @media (width >=1200px) {
      padding: 150px 56px 118px;

      .content-banner__subtitle {
        margin-bottom: 36px;
        font-size: var(--corp-type-desktop-heading-4-font-size);
        font-weight: var(--corp-type-desktop-heading-4-font-weight);
        line-height: var(--corp-type-desktop-heading-4-line-height);
        letter-spacing: -0.4px;
      }

      .content-banner__description {
        font-size: var(--corp-type-desktop-heading-xxl-font-size);
        font-weight: var(--fw-400);
        line-height: var(--corp-type-desktop-caption-6-line-height);
      }
    }
  }
}


.block.content-banner.committee-page {

  .content-banner__subtitle {
    color: var(--corp-color-surface-tertiary);
    opacity: .4;
    font-size: var(--corp-type-mobile-tag-1-font-size);
    font-weight: var(--corp-type-mobile-tag-1-font-weight);
    line-height: var(--corp-type-mobile-tag-1-line-height);
    margin: 0;

    @media (width >= 768px) {
      font-size: var(--corp-type-tablet-heading-2-font-size);
      font-weight: var(--corp-type-tablet-heading-2-font-weight);
      line-height: var(--corp-type-desktop-caption-8-line-height);
      opacity: .4;
    }

    @media (width >= 1200px) {
      font-size: var(--corp-type-desktop-heading-4-font-size);
      font-weight: var(--corp-type-desktop-heading-4-font-weight);
      line-height: var(--corp-type-desktop-heading-3xl-line-height);
      opacity: .4;
    }
  }

  .content-banner__title {
    color: var(--corp-color-surface-tertiary);
    font-size: var(--corp-type-mobile-display-2-font-size);
    font-weight: var(--corp-type-mobile-display-2-font-weight);
    line-height: var(--corp-type-mobile-display-5-line-height);
    margin-block: 24px;

    @media (width >= 768px) {
      font-size: var(--corp-type-tablet-display-font-size);
      font-weight: var(--corp-type-tablet-display-font-weight);
      line-height: var(--corp-type-tablet-display-3xl-line-height);
      margin-block: 12px;
    }

    @media (width >= 1200px) {
      color: var(--corp-color-white);
      font-size: var(--corp-type-desktop-display-font-size);
      font-weight: var(--corp-type-desktop-display-font-weight);
      line-height: var(--corp-type-desktop-display-line-height);
      margin-block: 24px 16px;
    }
  }

  .content-banner__description {
    color: var(--corp-color-white);
    font-size: var(--corp-type-mobile-body-2-font-size);
    font-weight: var(--corp-type-mobile-body-2-font-weight);
    line-height: var(--corp-type-mobile-body-2-line-height);

    @media (width < 768px) {
      padding-bottom: 28.5px;
    }

    @media (width >= 768px) {
      font-size: var(--corp-type-tablet-body-1-font-size);
      font-weight: var(--corp-type-tablet-body-1-font-weight);
      line-height: var(--corp-type-tablet-body-10-line-height);
    }

    @media (width >= 1200px) {
      font-size: var(--corp-type-desktop-body-lg-font-size);
      font-weight: var(--corp-type-desktop-body-lg-font-weight);
      line-height: var(--corp-type-desktop-body-lg-line-height);
    }
  }
}