/* about-collage breakpoints, loaded after the shared ones. */

@media (max-width: 1100px) {
  .about-collage { height: auto; min-height: 0; }
  .about-collage { min-height: 900px; margin-top: 80px; }
  .about-collage__copy { top: 80px; left: 50%; width: min(86%,644px); transform: translateX(-50%); text-align: center; }
  .about-collage__copy .button { margin-inline: auto; }
  .about-collage__media { inset: 510px 24px 50px; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
  .about-collage__media img { position: static; width: 100% !important; height: 150px !important; }
}

@media (max-width: 767px) {
  .about-collage .photo-collage__strip { display: flex; height: 100px; gap: 12px; padding-left: 16px; overflow: hidden; }
  .about-collage .photo-collage__strip img { position: static !important; width: 100px !important; height: 100px !important; flex: none; object-fit: cover; }
  .about-collage .photo-collage__rest { display: none; }
  .about-collage { display: flex; height: auto; min-height: 0; flex-direction: column; margin-top: 72px; padding: 60px 0; border-top: 1px solid rgba(0,0,0,.1); background: #fff var(--noise); }
  .about-collage__lines { display: none; }
  .about-collage__media { display: contents; }
  .about-collage .photo-collage__strip { order: 1; }
  .about-collage .photo-collage__strip + .photo-collage__strip { order: 3; margin-top: 44px; }
  .about-collage__copy { order: 2; position: static; width: auto; margin-top: 36px; padding-inline: 16px; text-align: center; transform: none; }
  .about-collage h2 { width: min(100%,286px); margin-inline: auto; font-size: 32px; line-height: 32px; letter-spacing: 0; }
  .about-collage__copy p { width: min(100%,340px); margin: 17px auto 0; font-size: 16px; line-height: 24px; }
  .about-collage__copy .button { width: max-content; min-width: 0; height: 50px; padding: 0 20px; margin: 37px auto 0; }
}

@media (max-width: 767px) {
  body.about-us-page .about-collage .photo-collage__strip {
    width: auto;
    min-width: 0;
    margin-inline: var(--rail-left) var(--rail-right);
    padding-inline: 0;
    overflow: hidden;
  }
}
