/* Styles pour l'affichage frontend des bannières */

.category-banner-images {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    line-height: 0;
}

.category-banner-image {
    margin: 0;
    padding: 0;
    line-height: 0;
    flex-shrink: 0;
}

.category-banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
}

/* Hauteur fixe pour que toutes les images aient la même hauteur */
.category-banner-images {
    height: 200px; /* Ajustez selon vos besoins */
}

/* Responsive - Sur mobile, empiler les images */
@media (max-width: 768px) {
    .category-banner-images {
        flex-wrap: wrap;
        height: auto;
    }
    
    .category-banner-image {
        width: 100% !important;
        height: 200px;
    }
}

/* Tablette - 2 images par ligne */
@media (min-width: 769px) and (max-width: 1024px) {
    .category-banner-images {
        flex-wrap: wrap;
        height: auto;
    }
    
    .category-banner-image {
        width: 50% !important;
        height: 200px;
    }
}