.carousel{position:relative;width:100%;margin-bottom:44px;user-select:none}
.carousel-stage{position:relative;height:460px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fafafa}
.carousel-slide{position:absolute;top:50%;left:50%;width:56%;aspect-ratio:4/3;border-radius:2px;overflow:hidden;background:#eee;cursor:pointer;transition:transform .55s cubic-bezier(.22,.68,0,1),opacity .55s,filter .55s;box-shadow:0 30px 60px -25px rgba(0,0,0,.25)}
.carousel-slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.carousel-slide[data-pos="center"]{transform:translate(-50%,-50%) scale(1);z-index:3;opacity:1;cursor:default;box-shadow:0 40px 80px -20px rgba(0,0,0,.35)}
.carousel-slide[data-pos="left"]{transform:translate(-152%,-42%) scale(.68);z-index:2;opacity:.55;filter:brightness(.8)}
.carousel-slide[data-pos="right"]{transform:translate(52%,-42%) scale(.68);z-index:2;opacity:.55;filter:brightness(.8)}
.carousel-slide[data-pos="hidden"]{transform:translate(-50%,-50%) scale(.45);opacity:0;z-index:1;pointer-events:none}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #ddd;font-size:20px;display:grid;place-items:center;z-index:5;cursor:pointer;color:#111}
.carousel-arrow:hover{background:#111;color:#fff;border-color:#111}
.carousel-arrow.prev{left:8px}.carousel-arrow.next{right:8px}
.carousel-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
.carousel-dot{width:7px;height:7px;border-radius:50%;background:#ddd;cursor:pointer;transition:.2s}
.carousel-dot.active{background:#111;width:20px;border-radius:4px}
@media(max-width:800px){
  .carousel-stage{height:280px}
  .carousel-slide{width:74%}
  .carousel-slide[data-pos="left"]{transform:translate(-128%,-40%) scale(.6)}
  .carousel-slide[data-pos="right"]{transform:translate(28%,-40%) scale(.6)}
  .carousel-arrow{width:36px;height:36px;font-size:17px}
}