/* CONTENEDOR GENERAL */
.cm-brands-carousel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;

    width: 100%;
    overflow: hidden;

    gap: 20px;
}


/* VIEWPORT */
.cm-brands-viewport {
    --visible-brands: 5;

    flex: 1 1 auto;
    min-width: 0;

    overflow: hidden;
}


/* FILA DE LOGOS */
.cm-brands-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;

    width: 100%;

    transition: transform 0.8s ease-in-out;
    will-change: transform;
}


/* CADA MARCA */
.cm-brands-track > * {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 calc(100% / var(--visible-brands)) !important;

    width: calc(100% / var(--visible-brands)) !important;
    min-width: calc(100% / var(--visible-brands)) !important;
    max-width: calc(100% / var(--visible-brands)) !important;

    box-sizing: border-box;

    padding-left: 12px;
    padding-right: 12px;

    margin: 0 !important;
}


/* IMÁGENES */
.cm-brands-track img {
    display: block;

    max-width: 100%;
    max-height: 100px;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* FLECHAS */
.cm-brands-carousel > :first-child,
.cm-brands-carousel > :last-child {
    display: flex !important;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto !important;

    cursor: pointer;
    user-select: none;

    z-index: 5;
}


/* TABLET */
@media (max-width: 1023px) {

    .cm-brands-viewport {
        --visible-brands: 4;
    }

    .cm-brands-carousel {
        gap: 16px;
    }

}


/* MOBILE */
@media (max-width: 767px) {

    .cm-brands-viewport {
        --visible-brands: 2;
    }

    .cm-brands-carousel {
        gap: 10px;
    }

    .cm-brands-track > * {
        padding-left: 8px;
        padding-right: 8px;
    }

}