[data-flickering]{
opacity: 0;
}
.next-parallax-slider{
--items-width: 40vw; --parallax-scale: 1.75; --progress-height: 1px; color: white; } .next-parallax-slider__slider {
display: flex;
align-items: center;
overflow-x: hidden;
will-change: transform;
width: 100%; height: 600px; }
.next-parallax-slider__container {
display: grid;
grid-template-columns: repeat(var(--slidesTotal), var(--items-width));
gap: 50px; cursor: grab;
padding: 0 50px; height: 100%;
}
.next-parallax-slider__item {
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
will-change: transform;
height: 100%
}
.next-parallax-slider__item-img-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.next-parallax-slider__item-content {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 1;
user-select: none;
}
.next-parallax-slider__item-img {
max-width: unset;
pointer-events: none;
user-select: none;
transform-origin: left center;
transform: scale(var(--parallax-scale)); will-change: transform;
}
.is-dragging .next-parallax-slider__container {
cursor: grabbing;
} .next-parallax-slider__progress{
margin-top: 50px; width: 100%;
display: flex;
align-items: center;
justify-content: center;
height: fit-content;
}
.next-parallax-slider__progress-line-wrap {
display: block;
width: 80%; height: var(--progress-height);
overflow: hidden;
background-color: #d6d6d6; transform-origin: left center;
will-change: transform;
}
.next-parallax-slider__progress-line {
display: block;
width: 100%;
height: var(--progress-height);
background-color: #000; transform: scaleX(0);
transform-origin: left center;
will-change: transform;
}