#before-after .title { max-width: 1100px; font-size: clamp(42px, 4vw, 54px); line-height: 1.08; letter-spacing: -.025em; }
.before-after__card { max-width: 1160px; margin-top: 28px; }
.before-after__labels span { padding: 10px 15px; }
.before-after__desktop-image { display: block; width: 100%; height: 410px; object-fit: cover; object-position: center; }
.before-after__body { padding: 26px 28px 30px; }
.before-after__note { margin: 0 0 7px !important; color: var(--blue) !important; font-size: 12px !important; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.before-after__body h3 { margin: 0; font-size: 23px; }
.before-after__body p:not(.before-after__note) { margin-top: 11px; }
.before-after__body .text-link { margin-top: 20px; }
.before-after__mobile-switcher { display: none; }

@media (max-width: 620px) {
  #before-after .title { font-size: clamp(32px, 9vw, 42px); }
  .before-after__labels,.before-after__desktop-image { display: none; }
  .before-after__mobile-switcher { display: grid; grid-template-columns: 1fr 1fr; padding: 14px 14px 0; background: #f8fcff; }
  .before-after__mobile-switcher input { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; opacity: 0; }
  .before-after__mobile-switcher label { padding: 10px 7px; border: 1px solid #b8dbef; color: #31516d; background: #fff; font-size: 12px; font-weight: 900; text-align: center; cursor: pointer; }
  .before-after__mobile-switcher label[for="before-state"] { border-radius: 8px 0 0 8px; }
  .before-after__mobile-switcher label[for="after-state"] { border-left: 0; border-radius: 0 8px 8px 0; }
  #before-state:checked + label,#after-state:checked + label { color: #fff; border-color: var(--blue); background: var(--blue); }
  .before-after__mobile-image { grid-column: 1 / -1; height: 230px; margin-top: 14px; background: url('../images/balcony-before-after-1.png') left center / 200% auto no-repeat; }
  #after-state:checked ~ .before-after__mobile-image { background-position: right center; }
  .before-after__body { padding: 24px 20px 28px; }
}