.benefitBanner{
  container-type: inline-size;
}

/* --- Základ: 4 v řadě --- */
.benefitBanner .benefitBanner__item{
  flex: 0 0 25% !important;
  max-width: 25% !important;
  box-sizing: border-box;
  align-items: center;
  gap: 12px;                 /* mezera ikona ↔ text */
  padding: 10px 14px;
  margin-bottom: 0 !important;
}
/* velikost ikony řídí __picture (motiv má flex:0 0 75px), ne __img */
.benefitBanner .benefitBanner__picture{
  flex: 0 0 auto !important;
  max-width: none !important;
  margin-right: 0 !important; /* mezeru řeší gap na __item */
  align-self: center;
}
.benefitBanner .benefitBanner__img{
  width: 60px !important;
  height: 60px !important;
}

/* --- Mobil: motiv dává banneru display:block → vrátit flex --- */
@media (max-width: 575px){
  .benefitBanner{
    display: flex !important;
    flex-wrap: wrap !important;
  }
}

/* --- Pruh užší než 900px: 2×2 --- */
@container (max-width: 900px){
  .benefitBanner .benefitBanner__item{
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin-bottom: 10px !important;
  }
}

/* --- Pruh užší než 430px (mobil): ikona nad textem, kompaktně ---
   Ikona 40px + text 12px je zvolené schválně: při 12px se i nejdelší
   popisek ("Jednoduchá manipulace") vejde na jeden řádek, takže jsou
   všechny 4 dlaždice stejně vysoké (78px) a pruh měří 163px místo 242px.
   Při 13px se dva popisky zalomí a mřížka je rozházená.            */
@container (max-width: 430px){
  .benefitBanner .benefitBanner__item{
    flex-direction: column;
    text-align: center;
    gap: 6px;
    padding: 8px 4px;
    margin-bottom: 4px !important;
  }
  .benefitBanner .benefitBanner__content{
    padding-right: 0;
  }
  .benefitBanner .benefitBanner__data{
    font-size: 12px;
    line-height: 1.3;
  }
  .benefitBanner .benefitBanner__img{
    width: 40px !important;
    height: 40px !important;
  }
}