@media (max-width:768px){

  html,
  body{
    overflow-x:hidden!important;
  }

  .hero,
  section.hero{
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    padding-top:52.5vw!important;
    padding-bottom:16px!important;
    background-size:100% auto!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
    overflow:visible!important;
  }

  .hero-inner{
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0 14px!important;
    display:block!important;
  }

  .hero-copy{
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:100%!important;
    max-width:none!important;
    padding-top:12px!important;
    pointer-events:auto!important;
  }

  .hero-copy > div:not(.hero-points),
  .hero-copy .cta-buttons,
  .hero-copy .cta-row,
  .hero-copy .hero-actions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  .hero-copy > a,
  .hero-copy > button,
  .hero-copy > div:not(.hero-points) a,
  .hero-copy > div:not(.hero-points) button{
    width:100%!important;
    min-width:0!important;
    min-height:64px!important;
    padding:10px 8px!important;
    margin:0!important;
    font-size:14px!important;
    border-radius:9px!important;
  }
}

@media (max-width:520px){

  .hero-copy > div:not(.hero-points),
  .hero-copy .cta-buttons,
  .hero-copy .cta-row,
  .hero-copy .hero-actions{
    grid-template-columns:1fr!important;
  }
}