/* Lay out all brands together, even when BRANDS_MAX_COLUMNS creates one per row. */
#indexBrandsList :is(.featuredBrands, .otherBrands) > div > div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

/* The columnar template's server-generated rows must not break the grid. */
#indexBrandsList :is(.featuredBrands, .otherBrands) > div > div > div {
    display: contents;
}

#indexBrandsList :is(.featuredBrands, .otherBrands) > div > div > br.clearBoth {
    display: none;
}

#indexBrandsList .brandCell {
    display: block;
    width: auto !important;
    min-width: 0;
    float: none;
    vertical-align: top;
    box-sizing: border-box;
    height: auto !important;
    min-height: 126px;
    padding: 0 8px 12px;
    overflow-wrap: anywhere;
}

#indexBrandsList .brandImage img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    #indexBrandsList :is(.featuredBrands, .otherBrands) > div > div {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    #indexBrandsList :is(.featuredBrands, .otherBrands) > div > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}