@layer layout {
  .cx-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cx-space-4);
    margin-block-end: var(--cx-space-6);
  }

  .cx-grid {
    display: grid;
    gap: var(--cx-space-5);
  }

  .cx-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cx-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cx-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cx-grid-auto { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

  .cx-actions-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
  }

  .cx-section-gap { margin-top: var(--cx-space-5); }

  @media (max-width: 1280px) {
    .cx-grid-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  @media (max-width: 960px) {
    .cx-grid-2,
    .cx-grid-3,
    .cx-grid-4,
    .cx-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .cx-page-header { flex-direction: column; align-items: stretch; }
  }

  @media (max-width: 640px) {
    .cx-grid-2,
    .cx-grid-3,
    .cx-grid-4,
    .cx-grid-5 { grid-template-columns: 1fr; }
  }
}