/* collage-hero breakpoints, loaded after the shared ones. */

@media (max-width: 1100px) {
  .about-hero { height: 760px; background: var(--paper); }
  .about-hero__collage { opacity: .24; object-fit: cover; }
  .about-hero__content { top: 105px; width: min(92%,690px); height: 550px; padding: 70px 24px 0; }
}

@media (max-width: 767px) {
  .about-hero .photo-collage__strip { display: flex; height: 100px; gap: 12px; padding-left: 16px; overflow: hidden; }
  .about-hero .photo-collage__strip img { position: static !important; width: 100px !important; height: 100px !important; flex: none; object-fit: cover; }
  .about-hero .photo-collage__rest { display: none; }
  .about-hero { display: flex; height: auto; flex-direction: column; padding: 0; background: var(--paper) var(--noise); }
  .about-hero .photo-collage, .about-hero .photo-collage__frame { display: contents; }
  .about-hero .photo-collage__strip { order: 1; }
  .about-hero .photo-collage__strip + .photo-collage__strip { order: 3; margin-top: 44px; }
  .about-hero__content { order: 2; position: static; width: auto; height: auto; padding: 36px 16px 0; transform: none; }
  .about-hero__title { width: min(100%,266px); margin-inline: auto; font-size: 32px; line-height: 32px; }
  .about-hero__title span { display: inline; }
  .about-hero__content > p { width: min(100%,316px); margin: 18px auto 0; font-size: 16px; line-height: 24px; }
  .about-hero__content > strong { display: none; }
  .about-hero__content > div { display: flex; flex-direction: row; justify-content: center; gap: 14px; margin-top: 37px; }
  .about-hero__content > div .button { width: 157px; min-width: 0; min-height: 50px; padding: 0; }
}