.about-mission {
  padding-block: var(--space-2xl);
  background: var(--color-surface-dark);
  color: var(--color-on-accent);
}

.about-mission__inner {
  display: grid;
  gap: var(--space-xl);
}

.about-mission__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-xl);
}

.about-mission__body--single { grid-template-columns: minmax(0, 1fr); }

.about-mission__copy {
  display: grid;
  justify-items: start;
  gap: var(--space-xl);
}

.about-mission__paragraph {
  max-inline-size: 428px;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -.03em;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  overflow-wrap: anywhere;
}

.about-mission__routes {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-mission__route {
  display: grid;
  min-block-size: 136px;
  align-content: center;
  gap: var(--space-xl);
  padding: var(--space-lg);
}

.about-mission__route--divided {
  border-block-end: 1px solid var(--color-border-strong);
}

.about-mission__route-title {
  margin: 0;
  font-size: clamp(var(--fs-button), 2.0833vw, var(--fs-direction-title));
  font-weight: 274;
  line-height: var(--lh-tight);
  letter-spacing: -.015em;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  overflow-wrap: anywhere;
}

.about-mission__route-description {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -.03em;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  overflow-wrap: anywhere;
}

@media (width <= 48rem) {
  .about-mission__body { grid-template-columns: minmax(0, 1fr); }
  .about-mission__copy { gap: var(--space-lg); }
  .about-mission__paragraph { max-inline-size: 100%; }
  .about-mission__route { min-block-size: 0; gap: var(--space-md); padding: var(--space-lg) 0; }
}