/* R7356. TYLKO strona glowna/mobile. Bez zmian desktopu, silnika,
   generowania kafelkow i synchronicznego scrolla istniejacych rzedow. */
@media screen and (max-width:820px){
  /* 1. Duze, wyrazne hero. Brak kropek i pustego paska pod grafika. */
  body.home-story-v2 #top .home-r3-hero-carousel{
    display:block!important;
    width:min(340px,88vw)!important;
    max-width:100%!important;
    height:auto!important;
    aspect-ratio:1/1!important;
    margin:7px auto 0!important;
    overflow:visible!important;
  }
  body.home-story-v2 #top .home-r3-hero-photo{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:none!important;
    aspect-ratio:1/1!important;
    object-fit:contain!important;
    margin:0 auto!important;
  }
  body.home-story-v2 #top .home-r3-hero-indicators{
    display:none!important;
    visibility:hidden!important;
    min-height:0!important;
    height:0!important;
    margin:0!important;
    padding:0!important;
  }
  /* 2. Dwa najwazniejsze banery jeden pod drugim, oba na cala szerokosc. */
  body.home-story-v2 #top .home-hero-actions{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    width:100%!important;
    max-width:none!important;
    gap:9px!important;
    margin:14px 0 16px!important;
  }
  body.home-story-v2 #top .home-hero-actions>.btn:first-child,
  body.home-story-v2 #top .home-hero-actions>.home-marta-about-cta{
    box-sizing:border-box!important;
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:49px!important;
    padding:12px 14px!important;
    margin:0!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:normal!important;
    font-size:13px!important;
    line-height:1.3!important;
    border-radius:13px!important;
  }
  body.home-story-v2 #top .home-hero-actions>.btn:nth-child(2){display:none!important;}
  /* 3. Te same trzy natywne przesuwalne rzedy x szesc kafelkow.
     Delikatnie wiekszy kafelek, aby bylo widac ucinany kolejny element. */
  body.home-mobile-conversion-r2 #wszystkie-czelendze #templateGrid .catalogue-mobile-row.home-r3-catalogue-row{
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    gap:9px!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    touch-action:pan-x pan-y!important;
  }
  body.home-mobile-conversion-r2 #wszystkie-czelendze #templateGrid .catalogue-mobile-row.home-r3-catalogue-row>.template-card,
  body.home-mobile-conversion-r2 #wszystkie-czelendze #templateGrid .catalogue-mobile-row.home-r3-catalogue-row:nth-child(2)>.template-card,
  body.home-mobile-conversion-r2 #wszystkie-czelendze #templateGrid .catalogue-mobile-row.home-r3-catalogue-row:nth-child(3)>.template-card{
    flex:0 0 clamp(116px,34vw,140px)!important;
    min-width:clamp(116px,34vw,140px)!important;
    max-width:clamp(116px,34vw,140px)!important;
    box-sizing:border-box!important;
  }
  body.home-mobile-conversion-r2 #wszystkie-czelendze .template-card h3{
    font-size:11px!important;
    line-height:1.3!important;
  }
  body.home-mobile-conversion-r2 #wszystkie-czelendze .template-card__action{
    font-size:10px!important;
    line-height:1.2!important;
  }
}