/* Keep the key visitor details aligned and readable in the hero. */
.hero-facts{align-items:stretch}
.hero-facts>div{min-width:0}
.hero-facts strong{white-space:nowrap}

@media(max-width:960px){
  .intro-story{min-width:0;overflow:hidden}
  .intro-story h2,.intro-story .intro-copy{max-width:100%;overflow-wrap:anywhere}
}

@media(max-width:640px){
  .hero-facts>div{gap:8px;padding-right:8px}
  .hero-facts strong{font-size:12px}
  .intro-showcase{overflow:hidden}
  .intro-monitor{width:420px;height:300px;top:12px}
  .intro-animal{height:285px}
  .intro-story{min-width:0;overflow:hidden}
  .intro-story h2,.intro-story .intro-copy{max-width:100%;overflow-wrap:anywhere}
  .intro-story h2{font-size:29px;letter-spacing:-.06em;word-break:normal}
  .experience-heading{position:relative;z-index:5}
  .experience-heading>p{position:relative;z-index:5;background:#f7f1e7;padding:14px 18px;border-radius:16px;line-height:1.45;overflow-wrap:anywhere}
  .gallery:before{z-index:0}
  .feeding-time{width:170px;height:170px;overflow:hidden}
  .feeding-time small{text-align:center;white-space:normal;max-width:120px;line-height:1.2}
  .feeding-time strong{line-height:1}
}