/* Pashmii - Benefit Banner 2x2 layout pro mobilní zařízení */
/* Tento CSS soubor zajistí 2x2 rozložení benefit banneru i na nejmenších obrazovkách */

/* Mobilní zařízení - pod 410px (kde se to původně přepínalo na 1x4) */
@media screen and (max-width: 410px) {

  /* Hlavní kontejner - flexbox wrap pro 2x2 grid */
  .benefitBanner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  /* Každý benefit item - 50% šířky minus gap */
  .benefitBanner__item {
    flex: 0 0 calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 6px 4px !important;
    box-sizing: border-box !important;
  }

  /* Obrázky - zmenšené pro více prostoru na text */
  .benefitBanner__picture {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 5px !important;
  }

  .benefitBanner__img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
  }

  /* Textový obsah */
  .benefitBanner__content {
    width: 100% !important;
  }

  /* Nadpis - čitelnější velikost */
  .benefitBanner__title {
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin-bottom: 3px !important;
    display: block !important;
  }

  /* Popis - čitelnější velikost */
  .benefitBanner__data {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }
}

/* Extra malé obrazovky - pod 320px */
@media screen and (max-width: 320px) {

  .benefitBanner__picture,
  .benefitBanner__img {
    width: 40px !important;
    height: 40px !important;
  }

  .benefitBanner__title {
    font-size: 13px !important;
  }

  .benefitBanner__data {
    font-size: 11px !important;
  }
}