@layer cx.layout {
  .cx-container { width: min(calc(100% - (2 * var(--cx-gutter))), var(--cx-size-container)); margin-inline: auto; }
  .cx-container--wide { width: min(calc(100% - (2 * var(--cx-gutter))), var(--cx-size-container-wide)); margin-inline: auto; }
  .cx-container--reading,
  .cx-reading { width: min(100%, var(--cx-size-reading)); }

  .cx-stack { display: flex; flex-direction: column; gap: var(--cx-space-5); }
  .cx-stack--tight { gap: var(--cx-space-3); }
  .cx-stack--loose { gap: var(--cx-space-8); }
  .cx-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cx-space-3); }
  .cx-grid { display: grid; gap: var(--cx-space-6); }
  .cx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr); gap: var(--cx-space-9); align-items: start; }
  .cx-sidebar-layout { display: grid; grid-template-columns: minmax(13rem, var(--cx-size-sidebar)) minmax(0, 1fr); gap: var(--cx-space-8); align-items: start; }

  .cx-section { padding-block: var(--cx-space-11); }
  .cx-section--tight { padding-block: var(--cx-space-9); }
  .cx-hero { min-height: min(78vh, 48rem); display: grid; align-items: center; padding-block: var(--cx-space-11); }
  .cx-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr); gap: var(--cx-space-10); align-items: center; }

  @media (max-width: 52rem) {
    .cx-grid--2,
    .cx-grid--3,
    .cx-split,
    .cx-sidebar-layout,
    .cx-hero__grid { grid-template-columns: 1fr; }
    .cx-hero { min-height: auto; }
  }
}