/* ==========================================================================
   About page
   Page hero, scope note and closing CTA are shared blocks and live in
   layout.css / components.css.
   ========================================================================== */

/* --- Prose blocks --------------------------------------------------------- */

.about-block + .about-block {
  margin-block-start: var(--section-gap);
}

.about-block__grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 48em) {
  .about-block__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(var(--space-lg), 4vw, var(--space-3xl));
    align-items: start;
  }
}

.about-block__heading {
  color: var(--color-orange-dark);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
}

.about-block__body {
  max-width: 68ch;
}

/* --- Typical assignments -------------------------------------------------- */

.assignments {
  display: grid;
  gap: var(--space-lg);
  margin: var(--space-md) 0 0;
}

@media (min-width: 40em) {
  .assignments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
  }
}

.assignment {
  padding-block-start: var(--space-sm);
  border-block-start: 2px solid var(--color-orange);
}

.assignment__title {
  margin-block-end: var(--space-3xs);
  color: var(--color-teal);
  font-size: var(--text-md);
}

.assignment__body {
  font-size: var(--text-base);
}