.yasmin-clients-slider {
--yasmin-clients-slider-height: 72px;
--yasmin-clients-slider-gap: 4rem;
--yasmin-clients-slider-duration: 35s;
--yasmin-clients-slider-fade: 64px; --yasmin-clients-slider-fade-bg: #ffffff;
--yasmin-clients-slider-pad-y: clamp(
0.5rem,
calc(var(--yasmin-clients-slider-height) * 0.18),
2rem
);
--yasmin-clients-slider-pad-x: clamp(
0.75rem,
calc(var(--yasmin-clients-slider-height) * 0.14),
1.5rem
);
width: 100%;
position: relative;
} .yasmin-section--bg-about .yasmin-clients-slider {
--yasmin-clients-slider-fade-bg: #f3f3f3;
}
.yasmin-section--bg-clients .yasmin-clients-slider {
--yasmin-clients-slider-fade-bg: #ffffff;
}
.yasmin-section--bg-contact .yasmin-clients-slider {
--yasmin-clients-slider-fade-bg: #f9fafb;
} .yasmin-clients-slider__viewport {
width: 100%;
overflow: hidden;
position: relative;
}
.yasmin-clients-slider__viewport::before,
.yasmin-clients-slider__viewport::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: var(--yasmin-clients-slider-fade);
z-index: 3;
pointer-events: none;
}
.yasmin-clients-slider__viewport::before {
left: 0;
background: linear-gradient(
to right,
var(--yasmin-clients-slider-fade-bg) 0%,
transparent 100%
);
}
.yasmin-clients-slider__viewport::after {
right: 0;
background: linear-gradient(
to left,
var(--yasmin-clients-slider-fade-bg) 0%,
transparent 100%
);
}
.yasmin-clients-slider__marquee {
position: relative;
height: var(--yasmin-clients-slider-height);
}
.yasmin-clients-slider__track {
height: var(--yasmin-clients-slider-height);
display: flex;
align-items: center;
width: max-content;
will-change: transform;
animation: yasmin-clients-slider-marquee var(--yasmin-clients-slider-duration)
linear infinite;
}
@keyframes yasmin-clients-slider-marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.yasmin-clients-slider__content {
height: var(--yasmin-clients-slider-height);
display: flex;
align-items: center;
gap: var(--yasmin-clients-slider-gap);
padding-right: var(--yasmin-clients-slider-gap);
}
.yasmin-clients-slider__item {
height: var(--yasmin-clients-slider-height);
display: flex;
align-items: center;
flex: 0 0 auto;
}
.yasmin-clients-slider__box {
height: 100%;
width: clamp(
8rem,
calc(
(var(--yasmin-clients-slider-height) - (2 * var(--yasmin-clients-slider-pad-y))) *
var(--yasmin-logo-aspect, 3) +
(2 * var(--yasmin-clients-slider-pad-x))
),
calc(var(--yasmin-clients-slider-height) * 6)
);
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
padding: var(--yasmin-clients-slider-pad-y) var(--yasmin-clients-slider-pad-x);
box-sizing: border-box;
max-width: calc(var(--yasmin-clients-slider-height) * 6);
}
.yasmin-clients-slider__img {
width: auto;
height: auto;
max-width: 100%;
max-height: calc(var(--yasmin-clients-slider-height) - (2 * var(--yasmin-clients-slider-pad-y)));
object-fit: contain;
display: block;
}
@media (prefers-reduced-motion: reduce) {
.yasmin-clients-slider__track {
animation: none;
transform: none;
position: relative;
}
.yasmin-clients-slider__marquee {
height: auto;
}
} .block-editor-block-list__block.is-selected .yasmin-clients-slider__track {
animation-play-state: paused;
}
.block-editor-block-list__block.is-selected .yasmin-clients-slider__viewport::before,
.block-editor-block-list__block.is-selected .yasmin-clients-slider__viewport::after {
display: none;
}