.clm-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    --clm-fade-color: #F0F5FA;
}


.clm-track {

    display: flex;
    width: max-content;

    will-change: transform;

    user-select: none;

}


.clm-sequence {

    display: flex;
    align-items: center;

}


.clm-item {

    flex: 0 0 auto;

    margin-right: var(--clm-gap);

    display: flex;
    align-items: center;

}


.clm-item img {

    height: var(--clm-height);

    width: auto;

    display: block;

    object-fit: contain;

    pointer-events: none;

    user-select: none;

    -webkit-user-drag: none;

    transition:
        transform .3s ease,
        opacity .3s ease;

}


/*
 Scale on hover
 Similar to React Bits scaleOnHover
*/

.clm-scale .clm-item:hover img {

    transform: scale(1.2);

}



/*
 Clickable logo
*/

.clm-item a {

    display: flex;

    align-items: center;

}



/*
 Fade edges
 Similar to fadeOut prop
*/

.clm-fade::before,
.clm-fade::after {

    content:"";

    position:absolute;

    top:0;

    bottom:0;

    width:80px;

    z-index:5;

    pointer-events:none;

}



.clm-fade::before {

    left:0;

    background:
    linear-gradient(
        to right,
        var(--clm-fade-color),
        transparent
    );

}



.clm-fade::after {

    right:0;

    background:
    linear-gradient(
        to left,
        var(--clm-fade-color),
        transparent
    );

}



/*
 Accessibility
*/

@media (prefers-reduced-motion: reduce){

    .clm-track {

        transform:none !important;

    }

}



/*
 Mobile adjustments
*/

@media(max-width:768px){

    .clm-fade::before,
    .clm-fade::after {

        width:40px;

    }

}