@supports (animation-timeline: view()) {
  .rp__frame,
  .cd__frame,
  .bx__cta {
    view-timeline: --frame block;
  }

  .rp__frame img,
  .cd__frame img {
    animation: parallax-frame linear both;
    animation-timeline: --frame;
    animation-range: cover;
  }

  .bx__banner {
    animation: parallax-banner linear both;
    animation-timeline: --frame;
    animation-range: cover;
  }

  @keyframes parallax-frame {
    from {
      transform: translateY(-7%) scale(1.16);
    }
    to {
      transform: translateY(7%) scale(1.16);
    }
  }

  @keyframes parallax-banner {
    from {
      transform: translateY(-11%) scale(1.26);
    }
    to {
      transform: translateY(11%) scale(1.26);
    }
  }

  @media (min-width: 901px) {
    .about__media,
    .rh__media {
      animation: parallax-hero linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }

    @keyframes parallax-hero {
      to {
        translate: 0 32vh;
      }
    }
  }
}