@layer blocks {
  section {
    padding-block: var(--space-xl-2xl);
    border-bottom: var(--border-width-thin) var(--border-style) var(--color-border);

    --flow-space: var(--space-s-m);
  }

  section[data-variant="alternate"] {
    background: var(--paper-2);
  }

  section[data-variant="form"] {
    border-bottom: none;
    --flow-space: var(--space-xs);
  }

  section[data-variant="settings"] {
    border-bottom: none;
    --flow-space: var(--space-3xs);
  }

  section header {
    --flow-space: var(--space-2xs);
  }

  section header > p {
    color: var(--text-3);
    max-width: 48ch;
  }

  section header em {
    font-style: italic;
    color: var(--brand);
  }

  section header[data-variant="pageTitle"] > span {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  section header[data-variant="pageTitle"] > span::before {
    content: "";
    display: block;
    width: 2rem;
    height: 1px;
    background: var(--brand-light);
  }
}