.sx-slider { position: relative; overflow: hidden; --sx-h: 600px; }
.sx-slider.spacing-none { padding: 0; }
.sx-slider__track { overflow: hidden; }
.sx-slider__slides { position: relative; display: flex; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; height: var(--sx-h); touch-action: pan-y; will-change: transform; backface-visibility: hidden; }
.sx-slider__slides.is-dragging { user-select: none; }
.sx-slider__slide { flex-shrink: 0; height: 100%; position: relative; user-select: none; -webkit-tap-highlight-color: transparent; }
.sx-slider__slide picture, .sx-slider__slide a { display: block; height: 100%; }
.sx-slider__slide img, .sx-slider__slide video { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.sx-slider.fit-contain .sx-slider__slide img, .sx-slider.fit-contain .sx-slider__slide video { object-fit: contain; }
.sx-slider__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 2rem 3.5rem; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); color: #fff; }
.sx-slider__bullets { position: absolute; z-index: 2; bottom: 2em; left: 50%; display: inline-flex; transform: translateX(-50%); user-select: none; }
.sx-slider__bullet { width: 9px; height: 9px; padding: 0; margin: 0 .25em; border-radius: 50%; border: 2px solid transparent; background-color: rgba(255, 255, 255, .5); box-shadow: 0 .25em .5em 0 rgba(0, 0, 0, .1); transition: all 300ms ease-in-out; cursor: pointer; line-height: 0; box-sizing: content-box; }
.sx-slider__bullet:hover, .sx-slider__bullet:focus-visible { border-color: #fff; outline: none; }
.sx-slider__bullet.is-active { background-color: #fff; }
.sx-slider__arrow { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); padding: 12px; border: 0; background: rgba(0, 0, 0, .5); color: #fff; opacity: .75; cursor: pointer; line-height: 1; }
.sx-slider__arrow:hover { opacity: 1; }
.sx-slider__arrow svg { display: block; fill: currentColor; }
.sx-slider__arrow--left { left: 2em; }
.sx-slider__arrow--right { right: 2em; }
@media (min-width: 600px) and (max-width: 960px) { .sx-slider__slides { height: var(--sx-h-t, var(--sx-h)); } }
@media (max-width: 599px) { .sx-slider__slides { height: var(--sx-h-m, var(--sx-h-t, var(--sx-h))); } }