/* v150 — mobile hero-bottom fix for LTR languages only.
   Prevent long translated quote from colliding with the 738 stat. */
@media (max-width:560px){
  html[lang="en"] .hero-bottom,
  html[lang="es"] .hero-bottom,
  html[lang="fr"] .hero-bottom{
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "quote stat"
      "scroll stat"!important;
    column-gap:12px!important;
    row-gap:6px!important;
    align-items:center!important;
  }

  html[lang="en"] .hero-quote,
  html[lang="es"] .hero-quote,
  html[lang="fr"] .hero-quote{
    grid-area:quote!important;
    justify-self:start!important;
    align-self:end!important;
    min-width:0!important;
    width:100%!important;
    max-width:190px!important;
    margin:0!important;
    padding:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    text-align:left!important;
    direction:ltr!important;
    font-size:9.2px!important;
    line-height:1.28!important;
  }

  html[lang="en"] .hero-quote:after,
  html[lang="es"] .hero-quote:after,
  html[lang="fr"] .hero-quote:after{
    display:none!important;
    content:none!important;
  }

  html[lang="en"] .hero-stat,
  html[lang="es"] .hero-stat,
  html[lang="fr"] .hero-stat{
    grid-area:stat!important;
    justify-self:end!important;
    align-self:center!important;
    flex:0 0 auto!important;
    white-space:nowrap!important;
    margin-left:0!important;
  }

  html[lang="en"] .scroll-hint,
  html[lang="es"] .scroll-hint,
  html[lang="fr"] .scroll-hint{
    grid-area:scroll!important;
    justify-self:start!important;
    min-width:0!important;
    white-space:nowrap!important;
  }
}

@media (max-width:390px){
  html[lang="en"] .hero-bottom,
  html[lang="es"] .hero-bottom,
  html[lang="fr"] .hero-bottom{
    column-gap:9px!important;
  }
  html[lang="en"] .hero-stat strong,
  html[lang="es"] .hero-stat strong,
  html[lang="fr"] .hero-stat strong{
    font-size:30px!important;
  }
  html[lang="en"] .hero-stat span,
  html[lang="es"] .hero-stat span,
  html[lang="fr"] .hero-stat span{
    font-size:9.2px!important;
  }
  html[lang="en"] .hero-quote,
  html[lang="es"] .hero-quote,
  html[lang="fr"] .hero-quote{
    max-width:175px!important;
    font-size:8.8px!important;
  }
}