@layer components {
  /* Components answer to the column they sit in. The page, each tray, the messages pane and the bar are each a layout. */
  #main,
  .tray__dialog,
  .messages-sidebar__pane,
  .bar {
    container: layout / inline-size;
  }

  /* A container cannot query itself, so the sheet, which the grid fills edge to edge, names the grid's width. */
  .project__sheet {
    container: card-grid / inline-size;
  }
}