.LPSlider { display:flex; flex-direction:column; user-select:none; }
.LPSlider img, .LPSlider a { user-drag:none; -webkit-user-drag:none; }
.LPSlider figure img { width:100%; height:auto; }

.LPSlider .viewer { max-width:1200rem; font-size:0; line-height:0; letter-spacing:0; margin-left:auto; margin-right:auto; position:relative; }
.LPSlider .viewer a { cursor:pointer; }
.LPSlider .viewer > * { display:flex; justify-content:flex-start; flex-wrap:nowrap; transition:transform 1s; align-items:stretch; }
.LPSlider .viewer > *.noTransition { transition:none; }
.LPSlider .viewer > * > * { display:flex; flex-shrink:0; width:100%; }

.LPSlider .arrow { position:absolute; top:calc(50% - 26rem); width:52rem; height:52rem; display:block; border-radius:50%; background-color:rgba(0, 0, 0, 0.5); cursor:pointer; transition:opacity 0.2s; }
.LPSlider .arrow.hide { opacity:0; pointer-events:none; }
.LPSlider .arrow::before,
.LPSlider .arrow::after { content:''; position:absolute; left:33%; top:48%; width:33%; height:4%; background-color:#fff; }
.LPSlider .arrow::before { transform-origin:left center; transform:rotate(-45deg); }
.LPSlider .arrow::after { transform-origin:left center; transform:rotate(45deg); }
.LPSlider .arrow.prev { left:14rem; }
.LPSlider .arrow.next { right:14rem; transform:rotate(180deg); }

.LPSlider .dots { display:flex; margin-top:20rem; width:100%; }
.LPSlider .dots .dot { width:32rem; height:32rem; display:flex; }
.LPSlider .dots .dot:not(active) { cursor:pointer; }
.LPSlider .dots .dot::after { content:''; width:10rem; height:10rem; border-radius:50%; background:#ccc; }
.LPSlider .dots .dot.on::after { background:#000; }

.LPSlider .thumbs { display:flex; gap:10rem; margin-top:20rem; margin-left:auto; margin-right:auto; }
.LPSlider .thumbs > *:not(.on) { cursor:pointer; }

.LPSlider[type=direct] .viewer { overflow:hidden; }
@media (max-width:480px) {      /* MOBILE */
    .LPSlider .arrow { position:absolute; top:calc(50% - 16rem); width:32rem; height:32rem; }
    .LPSlider .arrow.prev { left:12rem; }
    .LPSlider .arrow.next { right:12rem; transform:rotate(180deg); }
}