/* A part of a page under its own heading. */
.section {
  margin-block-end: var(--size-4);
}

/* The heading, a count of what's under it, and a button to add another at
   the far end, where the thumb finds it. */
.section__header {
  align-items: center;
  column-gap: var(--size-2);
  display: flex;
  padding-block: var(--size-2);
}

.section__add {
  --btn-background: var(--color-secondary);
  --btn-block-size: var(--size-11);
  --btn-hover-color: var(--color-border);
  --btn-icon-size: var(--size-5);
  --btn-inline-size: var(--size-11);
  --btn-padding: 0;
  --btn-radius: var(--rounded-full);

  margin-inline-start: auto;
}