/* The courses page: the full-viewport hero (styles/components/hero.css), then
   one idea per screen like the homepage. The Level 1 block: the .two.split
   grid (site.css) sets the photo beside the words and stacks title, photo,
   words on phones; the rows are styles/components/session-row.css; the
   closing block is the shared .foot-cta. */

.courses-level-1 h2, .courses-level-1 > .wrap > .lede { text-align: center; }
.courses-level-1 > .wrap > .lede { text-wrap: balance; }
.courses-level-1 .block-row { margin-top: var(--xl); }
.courses-level-1 .two-head h3 { margin-bottom: 0.4rem; }
@media (max-width: 820px) { .courses-level-1 .two-head h3 { text-align: center; } }   /* stacked above the photo */
.courses-level-1 .course-about { color: var(--text-2); }
.courses-level-1 .hairlines { margin-top: var(--md); }
.courses-level-1 .dates { max-width: var(--page); margin: var(--2xl) auto 0; scroll-margin-top: var(--header-h); }   /* the session pages' back link lands here */

.courses-quotes h2 { text-align: center; }