/* Real Chrome QA: prevent two hero captions from overlapping during image crossfades. */
.hero-slide:not(.is-active) .hero-content{visibility:hidden!important;opacity:0!important;transition:none!important}
.hero-slide.is-active .hero-content{visibility:visible}
.hero h1{text-wrap:balance;line-break:strict}
@media(max-width:700px){html[lang^="zh"] .hero h1 br{display:none}}
@media(max-width:600px){
 html{scroll-padding-block:95px 120px}
 .hero{display:grid!important;height:auto!important;max-height:none!important}
 .hero-slide{position:relative!important;grid-area:1/1;min-height:620px}
 .hero-content{padding-bottom:64px!important}
 .hero .hero-bottom{position:static!important;inset:auto!important;bottom:auto!important;width:100%!important;margin:32px 0 0!important;padding:0!important}
 .hero-bottom>span:first-child{display:none}
 .hero-controls{gap:8px!important}
 .hero-controls button{width:44px!important;height:44px!important;min-width:44px;font-size:23px!important}
 .hero .button{max-width:100%;white-space:normal;text-align:center;line-height:1.4}
 .button,.hero-controls button,.thumbnails button{scroll-margin-block:100px 130px}
}