/*
 * Layout object: a wide main column and a narrow aside, side by side.
 * Sections inside it sit next to each other, so the vertical rhythm gap
 * between siblings is dropped.
 */
@layer components {
  .split {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;

    & > * + * {
      margin-block-start: 0;
    }
  }

  /* The narrow column, when it holds navigation or actions: it stays beside
     the main column while that scrolls, below the sticky banner. */
  .split__aside {
    position: sticky;
    inset-block-start: calc(var(--app-header-height) + var(--space-6));
  }

  /* A split is a block of sections; space it like one. */
  .split + * {
    margin-block-start: var(--space-8);
  }
}