.aa-intro { border-bottom: 1px solid var(--color-border); }

.aa-intro__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 45px; }
.aa-intro__head .section-label { margin-bottom: 20px; }
.aa-intro__intro { color: var(--color-accent); font-size: 14px; line-height: 1.75; max-width: 370px; }
@media (max-width: 640px) {
  .aa-intro__head { display: block; margin-bottom: 30px; }
  .aa-intro__intro { margin-top: 20px; }
}
.aa-intro__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; }
.aa-intro__list { border-top: 1px solid var(--color-border); }
.aa-intro__item { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--color-border); }
.aa-intro__item h3 { margin: 0 0 7px; font-size: 16px; font-weight: 450; color: var(--color-fg); }
.aa-intro__item p { color: var(--color-muted); font-size: 13px; line-height: 1.65; }
@media (max-width: 900px) { .aa-intro__cols { gap: 38px; } }
@media (max-width: 640px) { .aa-intro__cols { grid-template-columns: 1fr; gap: 28px; } }

/* No list items: the body takes the full width and runs in two
   columns. The empty list column only shows in the editor, for its
   "+ Add" button. */
.aa-intro__cols:not(:has(.aa-intro__item)) { grid-template-columns: 1fr; }
.aa-intro__cols:not(:has(.aa-intro__item)) .copy { max-width: none; column-count: 2; column-gap: 75px; }
.aa-intro__cols:not(:has(.aa-intro__item)) .copy p { break-inside: avoid; }
.aa-intro__list:not(:has(.aa-intro__item)) { display: none; }
body.cms-edit .aa-intro__list:not(:has(.aa-intro__item)) { display: block; border-top: 0; }
@media (max-width: 640px) {
  .aa-intro__cols:not(:has(.aa-intro__item)) .copy { column-count: 1; }
}