@layer components {
  .c-component-hero.c-component-hero--editorial-spacing,
  .c-component-hero.c-component-hero--compact-editorial-spacing { --gutter: clamp(1rem, 3vw, 2rem); --stack-gap: 1.6rem; min-block-size: 0; display: block; }
  .c-component-hero.c-component-hero--editorial-spacing > .c-component-hero__content,
  .c-component-hero.c-component-hero--compact-editorial-spacing > .c-component-hero__content { max-inline-size: calc(var(--wa-content-width) + var(--gutter) * 2); }
  .c-component-hero.c-component-hero--editorial-spacing { padding-block: clamp(3.5rem, 6vw, 6rem); }
  .c-component-hero.c-component-hero--compact-editorial-spacing { padding-block: clamp(2.5rem, 4vw, 4rem); }
  :is(.c-component-hero--editorial-spacing, .c-component-hero--compact-editorial-spacing) .c-component-hero__content > :first-child { --stack-gap: .85rem; }
  :is(.c-component-hero--editorial-spacing, .c-component-hero--compact-editorial-spacing) .c-component-hero__content > .l-cluster { --cluster-gap: 1rem; }
  :is(.c-component-hero--editorial-spacing, .c-component-hero--compact-editorial-spacing) > .c-component-hero__content:has(> .l-cluster:empty):has(> .l-stack:last-child:empty) > .c-component-hero__layout > .l-stack:not(:empty) { margin-block-end: 1.6rem; }
}