@layer components {
  @media (min-width: 50rem) {
    .c-component-hero--split-leading .c-component-hero__content { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); column-gap: clamp(3rem,7vw,6rem); align-items: start; }
    .c-component-hero--split-leading .c-component-hero__content > :first-child { grid-column: 1; grid-row: 1; }
    .c-component-hero--split-leading .c-component-hero__layout { display: contents; }
    .c-component-hero--split-leading .c-component-hero__layout > :first-child { grid-column: 1; grid-row: 2; }
    .c-component-hero--split-leading .c-component-hero__media { grid-column: 2; grid-row: 1 / 5; align-self: center; }
    .c-component-hero--split-leading .c-component-hero__content > :nth-child(3) { grid-column: 1; grid-row: 3; }
    .c-component-hero--split-leading .c-component-hero__content > :nth-child(4) { grid-column: 1; grid-row: 4; }
  }
}