.bio-banner {
  padding: var(--PT) 0 var(--PB);
  position: relative;
  z-index: 1;

  .bio-banner__mask {
    bottom: 0;
    max-width: unset;
    position: absolute;
    right: 0;
    z-index: 1;
  }

  .page-width {
    position: relative;
    z-index: 2;
  }

  .bio-banner__container {
    display: grid;
    gap: 1rem;
    grid-template-columns: 60% 1fr;

    .bio-banner__right {
      pointer-events: none;
    }

    .bio-banner__title-text {
      font-size: var(--title-size);
      font-weight: 400;
      line-height: 1.11;
      margin-bottom: 2.4rem;
    }

    .bio-banner__subtitle {
      font-size: var(--subtitle-size);
      font-weight: 800;
      line-height: 1.35;
      margin-bottom: 6.5rem;
    }

    .bio-banner__description {
      font-size: var(--description-size);
      font-weight: 300;
      line-height: 1.45;
      margin-bottom: 3.2rem;
    }

    .bio-banner__actions svg {
      height: auto;
      width: var(--action-size);
    }

    .bio-banner__image {
      height: auto;
    }
  }

  @media (width <=1024px) {
    .bio-banner__container {
      gap: 0;
      grid-template-columns: 100%;

      .bio-banner__left {
        margin-bottom: -1.5rem;
      }

      .bio-banner__title-text {
        margin-bottom: 1.8rem;
      }

      .bio-banner__subtitle {
        margin-bottom: 3.2rem;
      }

      .bio-banner__right {
        margin: 0 -2rem;
      }
    }
  }
}