.pbs-banner {
--pbs-arrow-bg: rgba(255, 255, 255, .85);
--pbs-arrow-color: #1d2327;
--pbs-dot: rgba(0, 0, 0, .25);
--pbs-dot-active: #1d2327;
position: relative;
width: 100%;
max-width: 100%;
line-height: 0;
}
.pbs-banner *, .pbs-banner *::before, .pbs-banner *::after { box-sizing: border-box; } .pbs-banner .pbs-img,
.pbs-banner picture,
.pbs-banner .pbs-picture {
display: block;
width: 100%;
max-width: 100%;
height: auto;
margin: 0;
border: 0;
object-fit: contain;
}
.pbs-banner .pbs-link { display: block; line-height: 0; }
.pbs-banner .pbs-link:focus-visible { outline: 3px solid #2271b1; outline-offset: -3px; }
.pbs-single { border-radius: var(--pbs-radius, 0); overflow: hidden; } .pbs-stage { position: relative; }
.pbs-viewport {
position: relative;
overflow: hidden;
border-radius: var(--pbs-radius, 0);
transition: height var(--pbs-speed, 600ms) ease;
touch-action: pan-y;
}
.pbs-track { display: flex; align-items: flex-start; gap: var(--pbs-gap, 0px); will-change: transform; } .pbs-slide {
flex: 0 0 calc((100% - (var(--pbs-per, 1) - 1) * var(--pbs-gap, 0px)) / var(--pbs-per, 1));
min-width: 0;
}
.pbs-clone.is-hidden { display: none; }
.pbs-multi-view .pbs-slide { border-radius: var(--pbs-radius, 0); overflow: hidden; }
.pbs-multi-view .pbs-viewport { border-radius: 0; }
.pbs-slider.is-static .pbs-arrow, .pbs-slider.is-static .pbs-dots { display: none; }
.pbs-dot.is-hidden { display: none; }
.pbs-slider.is-dragging .pbs-track { transition: none !important; cursor: grabbing; }
.pbs-slider.is-dragging .pbs-link { pointer-events: none; }
.pbs-slider img { -webkit-user-drag: none; user-select: none; } .pbs-effect-fade .pbs-track { display: grid; transform: none !important; }
.pbs-effect-fade .pbs-slide {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
transition: opacity var(--pbs-speed, 600ms) ease, visibility 0s linear var(--pbs-speed, 600ms);
}
.pbs-effect-fade .pbs-slide.is-active {
opacity: 1;
visibility: visible;
z-index: 1;
transition: opacity var(--pbs-speed, 600ms) ease, visibility 0s;
} .pbs-arrow {
position: absolute;
top: 50%;
z-index: 3;
display: grid;
place-items: center;
width: 40px;
height: 40px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--pbs-arrow-bg);
color: var(--pbs-arrow-color);
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
cursor: pointer;
opacity: .9;
transform: translateY(-50%);
transition: opacity .2s, transform .2s;
line-height: 1;
}
.pbs-arrow:hover { opacity: 1; transform: translateY(-50%) scale(1.06); }
.pbs-arrow:focus-visible { outline: 3px solid #2271b1; outline-offset: 2px; }
.pbs-arrow[disabled] { opacity: .35; cursor: default; transform: translateY(-50%); }
.pbs-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pbs-prev { left: 12px; }
.pbs-next { right: 12px; } .pbs-dots { display: flex; justify-content: center; gap: 8px; padding-top: 12px; line-height: 0; }
.pbs-dot {
width: 8px;
height: 8px;
margin: 0;
padding: 0;
border: 0;
border-radius: 999px;
background: var(--pbs-dot);
cursor: pointer;
transition: width .25s, background .25s;
}
.pbs-dot.is-active { width: 22px; background: var(--pbs-dot-active); }
.pbs-dot:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; }
@media (max-width: 767px) {
.pbs-arrow { width: 32px; height: 32px; }
.pbs-arrow svg { width: 16px; height: 16px; }
.pbs-prev { left: 6px; }
.pbs-next { right: 6px; }
.pbs-dots { padding-top: 8px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
.pbs-viewport, .pbs-track, .pbs-effect-fade .pbs-slide { transition-duration: 0s !important; }
}