.view {
  display: grid;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  max-width: 72rem;
  margin-inline: auto;
}

/* The laptop layout: main content and a sidebar. Below the breakpoint the
   sidebar drops underneath. */
.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: var(--spacing-lg);
  align-items: start;
}

/* Sits under the scroll box, not inside it: a caption within the scrolling table
   would only be readable after scrolling to the bottom. */
.ranking-note {
  margin-top: var(--spacing-sm);
}

@media (max-width: 768px) {
  .view {
    padding: var(--spacing-md);
    gap: var(--spacing-md);
  }

  .split-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
}