/* Record Grid
 *
 * A record page's two columns: its content, and beside it a rail carrying the record's facts.
 * Stock css-zero has no two-column page component, so the split is ours. The rail's width is
 * fixed, so a wider container widens only the content. Both columns become one once the content
 * column would fall below 560px. The width measured is the page container's, which leaves out the
 * sidebar.
 */

.record-grid {
  column-gap: var(--size-12);  /* 48px */
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-inline-size);
}

/* A grid cannot query its own width, so its parent is the container it measures against. */
.container:has(> .record-grid) {
  container-type: inline-size;
}

/* The rail follows the content into one column when the two no longer fit side by side: 560px of
   content, the 48px gap and the 320px rail. A container query cannot read a custom property, so
   928px is kept in step with the gap and `--rail-inline-size` by hand. */
@container (width < 928px) {
  .record-grid {
    grid-template-columns: 1fr;
    row-gap: var(--size-6);
  }
}