/* Side-by-side code/commentary layout for #+begin_twocol blocks: pairs of
 * #+begin_src / #+begin_note become aligned grid rows, collapsing to a
 * single stacked column on narrow screens. */

.twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  column-gap: 1.5rem;
  row-gap: 0;
  margin: 1.5rem 0;
}

.twocol .org-src-container {
  margin: 0.75rem 0;
}

.twocol > .note {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  color: var(--site-ink);
  background: var(--site-mono-tint);
  border-left: 3px solid var(--site-accent);
  border-radius: 0.375rem;
  font-size: 0.95em;
}

.twocol > .note > :first-child {
  margin-top: 0;
}

.twocol > .note > :last-child {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .twocol {
    grid-template-columns: 1fr;
  }
}