.brand-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.brand-container:not(.eight):not(.four) {
    border-bottom: 1px dashed var(--color-dashed-border) !important;
    border-image: repeating-linear-gradient(to right, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
    border-image-slice: 1 !important;
}

/* Brand grid item hover effect - diamond shine animation */
.brand-grid-item {
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 66px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Brand logos - make them white but more dimmed */
.brand-grid-item img {
    filter: brightness(0) invert(1) opacity(0.6) !important;
}

/* Exception for sss-auto-logo - no filter */
.brand-grid-item img[src*="sss-auto-logo"] {
    filter: none !important;
}

.brand-grid-item:hover {
    background-color: var(--color-hover-bg) !important;
    /* #161718 */
}


@media (min-width: 768px) {
    .brand-grid-item {
        min-height: 100px !important;
    }
}

@media (min-width: 992px) {

    .brand-first-col,
    .brand-second-col {
        display: flex;
        border: none !important;
    }

    .brand-first-col {
        border-bottom: 1px dashed var(--color-dashed-border) !important;
        border-image: repeating-linear-gradient(to right, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
        border-image-slice: 1 !important;
    }

    .brand-container:not(.eight):not(.four) {
        border-bottom: none !important;
        border: none !important;
    }

    .brand-first-col .brand-container.two,
    .brand-second-col .brand-container.six {
        border-left: 1px dashed var(--color-dashed-border) !important;
        border-right: 1px dashed var(--color-dashed-border) !important;
        border-color: var(--color-dashed-border) !important;
        border-image: repeating-linear-gradient(to bottom, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
        border-image-slice: 1 !important;
    }

    .brand-first-col .brand-container.three,
    .brand-second-col .brand-container.seven {
        border: none !important;
        border-right: 1px dashed var(--color-dashed-border) !important;
        border-image: repeating-linear-gradient(to bottom, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
        border-image-slice: 1 !important;
    }


}