@layer components {
  /* A record's fields as a definition list, two columns when there is room. */
  .dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.5rem 1.25rem;
    margin: 0;

    & dt { color: var(--color-ink-muted); font-size: var(--text-sm); font-weight: 600; padding-top: 2px; }
    & dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

    @container (min-width: 60ch) {
      &:not(.dl--stacked) { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); }
    }
  }

  .block__body { container-type: inline-size; }

  .columns--main-side { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); }

  .form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--block-space) var(--block-space-l);
  }
}