.about-vision {
  padding-bottom: 150px;
}

@media (max-width: 767px) {
  section.about-values { padding: 60px 0; }
  .about-values h3 { word-break: keep-all; }
  html[lang^="zh"] .about-heading-break { display: none; }
  .about-vision {
    padding-bottom: 100px;
  }
}

@media (max-width: 1023px), (max-width: 1199px) and (hover: none) and (pointer: coarse) {
  .about-vision--with-evidence {
    padding-bottom: 0;
  }
}

@media (min-width: 768px) and (max-width: 1199px) and (hover: none) and (pointer: coarse) {
  section.about-values { padding: 80px 0; }
}

@media (min-width: 768px) and (max-width: 1023px) and (pointer: fine) {
  html[lang^="zh"] .about-story h2 { font-size: 30px; }
}

@media (min-width: 768px) and (max-width: 1023px) and (hover: none) and (pointer: coarse) {
  .about-story > div { grid-column: 1 / -1; }
  .about-story > div:last-child { padding: 24px 0 0; }
  .about-values .about-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-values-grid > :last-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - 2rem) / 2); }
  .about-values h3 { word-break: keep-all; }
}

@media (min-width: 768px) {
  html[lang^="zh"] .about-hero-history {
    max-width: 42rem;
    text-wrap: balance;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #about-template-team,
  #about-template-process {
    text-wrap: balance;
  }
}

/* Match the existing touch-tablet card layout at intermediate widths. */
@media (min-width: 768px) and (max-width: 1023.99px) {
  .about-values .about-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-values-grid > :last-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - 2rem) / 2); }
  .about-values h3 { word-break: keep-all; }
  html[lang^="en"] .about-values-grid p { text-wrap: pretty; }
}