/* ======================================================================
   Sauce Brand Logo Marquee  —  v1.3.0
   Widget: sauce-logo-marquee
   ====================================================================== */

.sauce-logo-marquee {
    --slm-per-view:  6;       /* logos visible at once (responsive)        */
    --slm-max-w:    160px;    /* max logo width                            */
    --slm-max-h:     60px;    /* max logo height                           */
    --slm-slot:     180px;
    --slm-pad:       16px;    /* horizontal padding each side of a logo */    /* px slot width — JS sets = marqueeW/perView */
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Track */
.slm__track {
    display: flex;
    align-items: center;      /* all logos vertically centered */
    width: max-content;
    will-change: transform;
}

/* Each logo occupies an equal slot. JS sets --slm-slot in px so the slot
   equals (marquee width / per-view), giving exactly per-view logos in view. */
.slm__item {
    flex: 0 0 auto;
    width: var(--slm-slot);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 var(--slm-pad);
}

.slm__logo {
    max-width:  var(--slm-max-w);
    max-height: var(--slm-max-h);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    pointer-events: none;       /* click does nothing */
    -webkit-user-drag: none;
    user-select: none;
}