.csx-logo-carousel {
    overflow: hidden;
    position: relative;
    --logo-count: 4;
    width: 100%;
}

.csx-logo-track {
    display: flex;
    align-items: center;
    gap: 5px;
    will-change: transform;
}

.csx-logo-item {
    flex: 0 0 calc(100% / var(--logo-count));
    display: flex;
    justify-content: center;
    align-items: center;
	background-color: var(--kwp-grey2) !important;
}

.csx-logo-item > * {
    width: min(100%, var(--logo-min-width));
    max-width: min(100%, var(--logo-max-width));
}

.csx-logo-item img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
	
}

.csx-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    width: min(100%, var(--logo-min-width));
    max-width: min(100%, var(--logo-max-width));
}

.csx-logo-carousel--filtered img {
    filter: grayscale(1);
    mix-blend-mode: multiply;
    transition: all 0.3s ease;
	opacity:0.4;
}

.csx-logo-carousel--filtered .csx-logo-item:hover img,
.csx-logo-carousel--filtered .csx-logo-link:hover img {
    filter: none;
    opacity: 1;
}