.hub-intro {
  max-width: 820px;
  margin: 0 0 32px;
}

.editorial-note,
.example-box,
.related-callout,
.table-of-contents {
  margin: 24px 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}

.editorial-note {
  border-left: 4px solid var(--green);
}

.table-of-contents h2 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.table-of-contents ol {
  margin: 0;
  padding-left: 22px;
  columns: 2;
  column-gap: 28px;
}

.table-of-contents li {
  break-inside: avoid;
  margin: 0 0 6px;
}

.example-box h3,
.related-callout h2 {
  margin-top: 0;
}

.source-list a {
  overflow-wrap: anywhere;
}

.breadcrumb span[aria-hidden="true"] {
  padding: 0 5px;
}

.article h2[id] {
  scroll-margin-top: 92px;
}

@media (max-width: 780px) {
  .table-of-contents ol {
    columns: 1;
  }

  .editorial-note,
  .example-box,
  .related-callout,
  .table-of-contents {
    padding: 16px;
  }
}