/* Side-by-side comparisons (see docsite/CONTRIBUTING-DOCS.md): two equal columns that stack on narrow screens.
   Each column is a subgrid over two shared rows (heading, code), so the code blocks start on the same line
   even when one heading wraps. Colors are inherited from the template, so light and dark mode both work. */
.side-by-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem;
  margin: 1rem 0;
}
.side-by-side > div {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  min-width: 0;
}
.side-by-side > div > p { margin: 0 0 0.25rem; font-weight: 600; }
.side-by-side pre { margin: 0; overflow-x: auto; }
.side-by-side pre code { white-space: pre; }
@media (max-width: 767.98px) {
  .side-by-side { grid-template-columns: minmax(0, 1fr); }
  .side-by-side > div + div { margin-top: 1rem; }
}