.hp-cpt-slideshow{position:relative;overflow:hidden}
.hp-cpt-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease, transform .9s ease;transform-origin:center center}
.hp-cpt-slide.active{opacity:1;position:relative;transform:none}
.hp-cpt-slide img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* effects */
.effect-fade .hp-cpt-slide{opacity:0}
.effect-slide .hp-cpt-slide{left:100%;transition:left .7s}
.effect-slide .hp-cpt-slide.active{left:0;position:relative}
.effect-zoom .hp-cpt-slide{transform:scale(1.08);opacity:0;transition:transform .9s,opacity .9s}
.effect-zoom .hp-cpt-slide.active{transform:scale(1);opacity:1}
.effect-cube{perspective:1000px}
.effect-cube .hp-cpt-slide{transform:rotateY(90deg);opacity:0;transition:transform .8s,opacity .8s}
.effect-cube .hp-cpt-slide.active{transform:rotateY(0);opacity:1}
.effect-flip .hp-cpt-slide{transform:rotateY(180deg);opacity:0;transition:transform .8s,opacity .8s}
.effect-flip .hp-cpt-slide.active{transform:rotateY(0);opacity:1}

/* arrows/dots styles */
.hp-prev,.hp-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.4);color:#fff;border:0;padding:10px;border-radius:6px;cursor:pointer;z-index:10}
.hp-prev{left:10px}.hp-next{right:10px}
.hp-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;display:flex;gap:6px}
.hp-dots .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.4)}
.hp-dots .dot.active{background:#fff}