.category-category-banners {
    margin-top: 40px;
    margin-bottom: 80px;
    display: flex;
}
.category-category-banners .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}
.category-category-banners .row > div {
    display:flex;
    flex: 1 1 auto;
}
.category-category-banners .category-item{

    display:flex;
    flex-direction: column;
    flex: 1 1 auto;


    padding:12px;
    border:1px solid #eee;
    margin-bottom:20px;
    background:#fff
}
.category-category-banners .category-item img {
    position: relative;
    transition: all .3s ease;
}
.category-category-banners .category-item:hover img {
    transform: scale(98%);

}
.category-category-banners img{
    width:100%;
    height:auto
}
.category-category-banners h3{
    margin:10px 0 6px
}
.category-category-banners p{
    margin:0;
    color:#757575
}


.category-category-banners {
    margin-top: 40px;
    margin-bottom: 80px;
    display: flex;
}
.category-category-banners .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.category-category-banners .row > div {
    display: flex;
    flex: 1 1 auto;
    min-width: 100%;   /* domyślnie 1 kolumna */
    max-width: 100%;
    padding: 0 15px 15px;
}

/* ≥576px – dwie kolumny po 50% */
@media (min-width: 576px) {
    .category-category-banners .row > div {
        min-width: 50%;
        max-width: 50%;
    }
}

/* ≥768px – trzy kolumny po 33.333% */
@media (min-width: 768px) {
    .category-category-banners .row > div {
        min-width: 50%;
        max-width: 50%;
    }
}
@media (min-width: 1024px) {
    .category-category-banners .row > div {
        min-width: 33.33%;
        max-width: 33.33%;
    }
}
@media (min-width: 1280px) {
    .category-category-banners .row > div {
        min-width: 25%;
        max-width: 25%;
    }
}



.category-banners .category-item{

    display:flex;
    flex-direction: column;
    flex: 1 1 auto;


    padding:12px;
    border:1px solid #eee;
    margin-bottom:20px;
    background:#fff
}
.category-banners .category-item img {
    position: relative;
    transition: all .3s ease;
}
.category-banners .category-item:hover img {
    transform: scale(98%);

}
.category-banners img{
    width:100%;
    height:auto
}
.category-banners h3{
    margin:10px 0 6px
}
.category-banners p{
    margin:0;
    color:#666
}