@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. */
  :has(> .sidebar) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sidebar-gap, var(--space-half));
    align-items: var(--sidebar-align, flex-start);
  }

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

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