.sps-wrapper { position: relative; max-width: 100%; margin: 1rem auto; }
.sps-viewport { overflow: hidden; width: 100%; position: relative; }
.sps-viewport::before { content: ""; display: block; width: 100%; }
.sps-track { display: flex; transition: transform .4s ease; will-change: transform; }
.sps-slide { position: relative; flex: 0 0 100%; user-select: none; }
.sps-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sps-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: .45rem .6rem; background: rgba(0,0,0,.55); color: #fff; font-size: .9rem; line-height: 1.3; }
.sps-arrow { position: absolute; top: 50%; transform: translateY(-50%); border: 0; padding: .5rem .7rem; font-size: 1.5rem; cursor: pointer; background: rgba(0,0,0,.4); color: #fff; border-radius: .5rem; }
.sps-prev { left: .5rem; }
.sps-next { right: .5rem; }
.sps-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: .4rem; display: flex; gap: .4rem; }
.sps-dots button { width: .6rem; height: .6rem; border-radius: 999px; border: 0; background: rgba(255,255,255,.5); cursor: pointer; }
.sps-dots button[aria-current="true"] { background: rgba(255,255,255,.95); }
/* Common ratios */
.sps-wrapper[data-ratio="16/9"] .sps-viewport::before { padding-top: 56.25%; }
.sps-wrapper[data-ratio="4/3"] .sps-viewport::before { padding-top: 75%; }
.sps-wrapper[data-ratio="1/1"] .sps-viewport::before { padding-top: 100%; }