/* values breakpoints, loaded after the shared ones. */

@media (max-width: 1100px) {
  .about-values { height: auto; min-height: 0; }
  .about-values { grid-template-columns: minmax(0,500px); gap: 60px; justify-content: center; margin-top: 80px; padding: 0 24px; }
  .about-values__intro { grid-row: 1; }
  .about-values__intro h2 { line-height: 50px; }
  .about-values__intro > p:not(.eyebrow), .about-values__intro > p:last-child { line-height: 26px; }
  .about-value { padding-top: 0; }
}

@media (max-width: 767px) {
  .about-values .eyebrow { padding: 3px 14px; font-size: 16px; }
  .about-values { display: flex; height: auto; flex-direction: column; align-items: center; gap: 0; margin-top: 80px; padding-inline: 16px; text-align: center; }
  .about-values__intro { order: 1; width: 100%; }
  .about-values .about-value { order: 2; width: 100%; margin-top: 33px; padding-top: 0; }
  .about-values .about-value:last-of-type { order: 3; }
  .about-values__intro h2 { width: min(100%,282px); margin: 28px auto 0; font-size: 32px; font-weight: 600; line-height: 32px; }
  .about-values__intro h2 em { display: inline; }
  .about-values__intro > p:not(.eyebrow) { width: min(100%,322px); margin: 17px auto 0; font-size: 16px; line-height: 24px; }
  .about-values__intro > p:not(.eyebrow) + p { width: min(100%,342px); margin-top: 11px; }
  .about-value > span { width: 40px; height: 40px; }
  .about-value > span img { width: 18px; height: 18px; }
  .about-value h3 { width: min(100%,304px); margin: 21px auto 0; font-size: 20px; font-weight: 500; line-height: 20px; }
  .about-value p { width: min(100%,349px); margin: 14px auto 0; font-size: 16px; line-height: 24px; }
  .about-value:first-of-type h3 { width: min(100%,268px); }
  .about-value:first-of-type p { width: min(100%,297px); }
}