/* before-after breakpoints, loaded after the shared ones. */

@media (max-width: 900px) {
  .brand-shift { margin-top: 80px; }
  .brand-shift .section-intro { max-width: none; }
  .brand-shift__panel { display: flex; width: auto; height: auto; flex-direction: column; margin: 60px 16px 0; }
  .brand-shift__side { position: static; width: auto; height: auto; padding: 24px; }
  .brand-shift__label { position: static; margin: 0 0 16px; }
  .brand-shift__side img { position: static; top: auto; left: auto; width: 100%; height: auto; }
}

@media (max-width: 767px) {
  .brand-shift { margin-top: 60px; }
  .brand-shift__panel { margin: 40px 16px 0; }
  .brand-shift__side { padding: 16px; }
}

@media (max-width: 900px) {
  /* The phone comparison keeps both identities visible (216:26159–26168). */
  body.branding-page .brand-shift .section-intro h2 { font-size: 32px; line-height: 32px; }
  body.branding-page .brand-shift__panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 209px; margin: 40px 16px 0; border: 1px solid rgba(0,0,0,.1); }
  body.branding-page .brand-shift__side { min-width: 0; padding: 15px 14px 26px; }
  body.branding-page .brand-shift__label { width: 84px; max-width: 100%; height: 24px; margin-bottom: 32px; padding: 0 10px; font-size: 14px; line-height: 24px; }
  body.branding-page .brand-shift__label::before { width: 6px; height: 6px; flex: none; }
  body.branding-page .brand-shift__side--before .brand-shift__label { border-color: rgba(0,0,0,.2); color: rgba(0,0,0,.5); background: rgba(0,0,0,.05); }
  body.branding-page .brand-shift__side img { width: 100%; height: auto; aspect-ratio: 163 / 110; object-fit: cover; }
}