/* v51n – jen úprava hero karty:
   - více průhledná
   - více vlevo
   - malý text pořád čitelný
*/

html body .hero-grid,
html body .hero-grid--single{
  justify-items:start!important;
  align-items:center!important;
}

html body .hero-copy,
html body .hero-card,
html body .hero__card,
html body .hero-content,
html body .hero-panel{
  margin-left:clamp(18px, 5vw, 92px)!important;
  margin-right:auto!important;
  max-width:700px!important;
  width:min(700px, calc(100vw - 42px))!important;

  /* víc průhledné než v51m */
  background:rgba(255,250,236,.48)!important;
  border:1px solid rgba(255,255,255,.62)!important;
  box-shadow:0 30px 90px rgba(38,34,24,.22)!important;
  backdrop-filter:blur(15px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(15px) saturate(1.08)!important;
}

html body .hero h1,
html body .hero-copy h1,
html body .hero-card h1,
html body .hero__card h1,
html body .hero-content h1,
html body .hero-panel h1{
  color:#20291f!important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.88),
    0 8px 24px rgba(255,255,255,.55)!important;
}

html body .hero p,
html body .hero-copy p,
html body .hero-card p,
html body .hero__card p,
html body .hero-content p,
html body .hero-panel p,
html body .hero .lead,
html body .hero-copy .lead{
  color:#2f3b31!important;
  opacity:1!important;
  font-weight:760!important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.82),
    0 4px 16px rgba(255,255,255,.62)!important;
}

/* pilulky na hero kartě */
html body .hero-trust span,
html body .hero .pill,
html body .hero .chip{
  color:#273127!important;
  background:rgba(255,255,255,.46)!important;
  border:1px solid rgba(65,72,60,.18)!important;
  text-shadow:none!important;
  box-shadow:0 8px 18px rgba(38,34,24,.08)!important;
}

/* Na mobilu zpátky doprostřed, aby se to nemačkalo */
@media(max-width:760px){
  html body .hero-grid,
  html body .hero-grid--single{
    justify-items:center!important;
  }

  html body .hero-copy,
  html body .hero-card,
  html body .hero__card,
  html body .hero-content,
  html body .hero-panel{
    margin-left:auto!important;
    margin-right:auto!important;
    width:min(700px, calc(100vw - 28px))!important;
  }
}