@media (max-width: 700px) {
  #area-dialog.text-only[open] { max-width: calc(100vw - 20px); }
  .hero h1 {
    top: 230px;
    left: 24px;
    font-size: 60px;
    line-height: .94;
    letter-spacing: 0;
  }
  .hero-note { width: 210px; }
  .hero-note p { font-size: 15px; line-height: 1.5; letter-spacing: 0; }
  .about-heading { z-index: 1; }
  .about-heading #doctor-name { width: max-content; max-width: 100%; margin-inline: auto; text-align: left; font-size: 84px; }
  .about-heading #doctor-name .doctor-first { line-height: .86; }
  .about-heading #doctor-name .doctor-middle { margin: 0 0 0 24px; font-size: 72px; line-height: .88; }
  .about-heading #doctor-name .doctor-surname { margin: 0 0 0 8px; font-size: 76px; line-height: .88; }
  .about-photo { grid-row: 2; margin: -16px 0 0; z-index: 2; }
  .about-copy { grid-row: 3; padding-top: 32px; padding-bottom: 72px; }
  .care-photo { width: min(100%, 320px); aspect-ratio: 1; margin: 32px auto 0; justify-self: center; }
  .care-photo img { object-fit: cover; object-position: center top; }
}
@media (min-width: 500px) and (max-width: 700px) {
  .hero-note { bottom: 190px; }
  .about-heading #doctor-name { font-size: 100px; }
  .about-heading #doctor-name .doctor-middle { font-size: 84px; }
  .about-heading #doctor-name .doctor-surname { font-size: 90px; }
}
@media (max-width: 389px) {
  .hero h1 { font-size: 56px; }
  .about-heading #doctor-name .doctor-middle { margin-left: 12px; }
}
@media (max-width: 359px) {
  .hero h1 { font-size: 52px; }
  .about-heading #doctor-name { font-size: 76px; }
  .about-heading #doctor-name .doctor-middle { font-size: 64px; }
  .about-heading #doctor-name .doctor-surname { font-size: 68px; }
}