.pbac-wrap {
width: 100%;
padding: 60px 0;
overflow-x: hidden;
overflow-y: visible;
}
.pbac-carousel {
--pbac-desktop-visible: 4;
--pbac-mobile-visible: 1;
--pbac-gap: 20px;
--pbac-accent: #ff7a00;
--pbac-center-scale: 1.15;
--pbac-side-scale: 0.82;
position: relative;
max-width: 1200px;
margin: 0 auto;
overflow-x: hidden;
overflow-y: visible; padding: 30px 0; color: var(--pbac-accent); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}
.pbac-track {
display: flex;
align-items: center;
gap: var(--pbac-gap);
will-change: transform;
transform: translate3d(0, 0, 0); backface-visibility: hidden;
}
.pbac-slide {
position: relative;
flex: 0 0 auto; width: calc((100% - (var(--pbac-gap) * (var(--pbac-desktop-visible) - 1))) / var(--pbac-desktop-visible));
aspect-ratio: 1 / 1;
border-radius: 18px;
overflow: hidden;
background: #f2f2f2;
transform: scale(var(--pbac-side-scale));
filter: grayscale(0.15) brightness(0.97);
transition: transform .35s ease, filter .35s ease, box-shadow .35s ease;
}
.pbac-slide img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; display: block;
backface-visibility: hidden;
}
.pbac-slide img.pbac-after {
clip-path: inset(0 100% 0 0);
will-change: clip-path;
}
.pbac-handle {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 3px;
background: currentColor;
box-shadow: 0 0 8px currentColor;
opacity: 0;
pointer-events: none;
will-change: left;
}
.pbac-slide.active {
transform: scale(var(--pbac-center-scale));
filter: grayscale(0) brightness(1);
box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}
.pbac-slide.active .pbac-handle {
opacity: 1;
} @media (max-width: 782px) {
.pbac-slide {
width: calc((100% - (var(--pbac-gap) * (var(--pbac-mobile-visible) - 1))) / var(--pbac-mobile-visible));
border-radius: 14px;
}
}