/* =========================================================
   USP pruh na homepage (.benefitBanner.position--benefitHomepage)
   4 položky v jedné řadě na desktopu, 2×2 na tabletu i mobilu.

   Motiv má na položkách základ flex:1 1 33% (počítá se 3 USP
   na detailu produktu), proto se 4. USP na homepage zalamovala
   pod ostatní. Zde přepis na 25 % + responzivní breakpointy.
   Cíleno jen na position--benefitHomepage → detail produktu
   (position--benefitProduct) zůstává nedotčený.

   Soubor: /user/documents/yanabel/benefit-homepage.css
   ========================================================= */

/* --- Desktop: 4 v řadě --- */
.benefitBanner.position--benefitHomepage .benefitBanner__item{
  flex: 0 0 25%;
  max-width: 25%;
  box-sizing: border-box;
  align-items: center;
  gap: 12px;            /* mezera ikona ↔ text */
  padding: 8px 14px;
}
.benefitBanner.position--benefitHomepage .benefitBanner__img{
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
}

/* --- Tablet (≤ 991px): 2×2, ikona vlevo --- */
@media (max-width: 991px){
  .benefitBanner.position--benefitHomepage .benefitBanner__item{
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* --- Mobil (≤ 575px): 2×2, ikona nad textem, vycentrováno --- */
@media (max-width: 575px){
  .benefitBanner.position--benefitHomepage .benefitBanner__item{
    flex-direction: column;
    text-align: center;
    gap: 8px;
    padding: 12px 6px;
  }
  .benefitBanner.position--benefitHomepage .benefitBanner__img{
    width: 48px;
    height: 48px;
  }
}