@media screen and (max-width: 767px) {
    /* Nastavenie mriežky pre hlavný kontajner */
    .benefitBanner.position--benefitProduct {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Vytvorí dva rovnako široké stĺpce */
        gap: 10px; /* Medzera medzi bannermi */
        margin-bottom: 20px; /* Odstup od spodného obsahu */
    }

    /* Úprava jednotlivých položiek, aby sa prispôsobili */
    .benefitBanner.position--benefitProduct .benefitBanner__item {
        width: 100%; /* Aby sa roztiahli na celú šírku bunky mriežky */
        margin: 0; /* Zrušenie pôvodných okrajov */
        height: auto; /* Aby sa výška prispôsobila obsahu */
        
        /* Voliteľné: Ak bude text príliš natlačený, odkomentuj riadky nižšie,
           čo dá ikonku nad text a vycentruje to: */
        /* display: flex; */
        /* flex-direction: column; */
        /* align-items: center; */
        /* text-align: center; */
    }
}
/* na hlavnej stranke*/
@media screen and (max-width: 767px) {
    /* Nastavenie mriežky pre hlavný kontajner */
    .benefitBanner.position--benefitHomepage  {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Vytvorí dva rovnako široké stĺpce */
        gap: 10px; /* Medzera medzi bannermi */
        margin-bottom: 35px; /* Odstup od spodného obsahu */
    }

    /* Úprava jednotlivých položiek, aby sa prispôsobili */
    .benefitBanner.position--benefitHomepage .benefitBanner__item {
        width: 100%; /* Aby sa roztiahli na celú šírku bunky mriežky */
        margin: 0; /* Zrušenie pôvodných okrajov */
        height: auto; /* Aby sa výška prispôsobila obsahu */
        
        /* Voliteľné: Ak bude text príliš natlačený, odkomentuj riadky nižšie,
           čo dá ikonku nad text a vycentruje to: */
        /* display: flex; */
        /* flex-direction: column; */
        /* align-items: center; */
        /* text-align: center; */
    }
    .type-index .benefitBanner.position--benefitHomepage {
	border-bottom: 0px solid #e4e4e4;
	padding: 32px 0;
}
}
/*subkategorie aby boli v dvoch riadkoch*/
@media screen and (max-width: 767px) {
    .subcategories li {
        padding-top: 0;
        margin: 0 0 20px 0; /* Upravil som margin, aby to nerobilo šarapatu */
        
        /* Tieto dva riadky pridajte: */
        width: 50% !important;
        float: left !important;
    }
    /* Musíte zacieliť ten text, pravdepodobne to bude .subcategories li a span alebo .subcategories .text */

    .subcategories li a span.text {
        white-space: normal !important;   /* Povolí zalomenie textu na ďalší riadok */
        text-overflow: clip !important;   /* Odstráni tri bodky (...) */
        overflow: visible !important;     /* Zobrazí všetok text, aj ten čo "preteká" */
        display: block;                   /* Zabezpečí, aby sa element správal ako blok */
        line-height: 1.2;                 /* Trochu zmenší riadkovanie, aby to nezaberalo veľa miesta */
}
}