/* Column banners retain the source artwork ratio on phones. */
@media (max-width: 767px) {
 body main section:is(.brand-hero, .client-hero, .layout-hero, .products-hero, .tech-hero, .contact-page__hero) {
  position: relative; width: 100%; height: auto !important; min-height: 0 !important; max-height: none;
  aspect-ratio: 48 / 25; padding: 0; background-size: contain; background-position: center; background-repeat: no-repeat;
 }
 body main :is(.products-hero, .tech-hero, .contact-page__hero) > picture { display: block; width: 100%; height: 100%; }
 body main :is(.products-hero, .tech-hero, .contact-page__hero) > picture > img {
  display: block; position: absolute; inset: 0; width: 100%; height: 100% !important;
  max-height: none; object-fit: contain; object-position: center;
 }
 body main .tech-hero h1 { left: 6%; bottom: 10%; top: auto; font-size: clamp(14px, 4vw, 28px); line-height: 1.25; max-width: 88%; }
 body main section.about-intro {
  height: auto !important; min-height: 0 !important; max-height: none;
  padding: 52.083333vw 0 0; background-size: 100% auto; background-position: center top; background-repeat: no-repeat;
 }
 body main .about-intro-copy {
  position: relative; inset: auto; width: 100%; margin: 0; box-sizing: border-box;
  padding: 20px; background: #fff; font-size: 14px; line-height: 1.6;
 }
}