@layer compositions {
  /* A side of fixed size beside content that fills the rest, wrapping above
     it once the content would drop below --sidebar-wrap-at. With no
     --sidebar-size the side takes its content's width; --sidebar-grow: 0
     keeps it at that width when it wraps. */
  :has(> .sidebar) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sidebar-gap);
    align-items: var(--sidebar-align);
  }

  .sidebar {
    flex-basis: var(--sidebar-size);
    flex-grow: var(--sidebar-grow);
  }

  :has(> .sidebar) > :not(.sidebar) {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--sidebar-wrap-at);
  }
}