:root{
  --ssp2-h:520px;
}

.ssp2{
  position: relative;
  width: 100%;
  height: var(--ssp2-h);
  overflow: hidden;
  border-radius: 14px;
  background: #111;
}
.ssp2-track{
  height: 100%;
  display:flex;
  width: 100%;
  transform: translate3d(0,0,0);
  transition: transform 650ms ease;
}
.ssp2-slide{
  position: relative;
  min-width: 100%;
  height: 100%;
}
.ssp2-bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position:center;
  transform: scale(1.02);
}
.ssp2-ov{ position:absolute; inset:0; }
.ssp2-canvas{
  position: relative;
  height: 100%;
  width: 100%;
}
.ssp2-layer{
  position:absolute;
  opacity: 0;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}
.ssp2-layer.is-on{
  opacity: 1;
}

.ssp2-txt{ width: 100%; height:100%; display:flex; align-items:center; }
.ssp2-btn{
  width: 100%;
  height: 100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight: 800;
  border-radius: 999px;
}
.ssp2-img{ width:100%; height:100%; object-fit: cover; border-radius: inherit; display:block; }

.ssp2-arrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  color:#fff;
  font-size: 26px;
  cursor:pointer;
  z-index: 6;
  display:grid;
  place-items:center;
}
.ssp2-prev{ left: 12px; }
.ssp2-next{ right: 12px; }

.ssp2-dots{
  position:absolute; left:0; right:0; bottom: 12px;
  display:flex; justify-content:center; gap:8px;
  z-index: 7;
}
.ssp2-dot{
  width: 10px; height: 10px; border:0;
  border-radius: 99px;
  background: rgba(255,255,255,.45);
  cursor:pointer;
  transition: width .25s ease, background .25s ease;
}
.ssp2-dot.is-active{ width: 28px; background: rgba(255,255,255,.9); }

/* Animations (triggered when is-on gets added; initial state depends on class) */
.ssp2-anim-none{}
.ssp2-anim-fade{ opacity:0; }
.ssp2-anim-fade.is-on{ opacity:1; transition: opacity 700ms ease; }

.ssp2-anim-fade-up{ opacity:0; transform: translate3d(0,16px,0); }
.ssp2-anim-fade-up.is-on{ opacity:1; transform: translate3d(0,0,0); transition: transform 700ms ease, opacity 700ms ease; }

.ssp2-anim-fade-left{ opacity:0; transform: translate3d(-16px,0,0); }
.ssp2-anim-fade-left.is-on{ opacity:1; transform: translate3d(0,0,0); transition: transform 700ms ease, opacity 700ms ease; }

.ssp2-anim-zoom{ opacity:0; transform: scale(.96); }
.ssp2-anim-zoom.is-on{ opacity:1; transform: scale(1); transition: transform 700ms ease, opacity 700ms ease; }

@media (max-width: 767px){
  .ssp2{ border-radius: 12px; }
  .ssp2-arrow{ display:none; }
}