.d3ac-wrap{
  --d3ac-perspective:1200px;
  --d3ac-side-scale:.72;
  --d3ac-side-opacity:.65;
  --d3ac-transition:650ms;
  position:relative;
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:20px 0 48px;
  overflow:hidden;
  isolation:isolate;
}
.d3ac-stage{
  position:relative;
  width:100%;
  height:clamp(280px, 42vw, 620px);
  perspective:var(--d3ac-perspective);
  perspective-origin:50% 50%;
}
.d3ac-track{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
}
.d3ac-slide{
  position:absolute;
  top:50%;
  left:50%;
  width:min(52vw, 560px);
  height:min(34vw, 380px);
  min-width:250px;
  min-height:190px;
  transform-style:preserve-3d;
  transform-origin:center center;
  transition:
    transform var(--d3ac-transition) cubic-bezier(.22,.61,.36,1),
    opacity var(--d3ac-transition) ease,
    filter var(--d3ac-transition) ease,
    z-index 0s linear;
  will-change:transform,opacity,filter;
  pointer-events:none;
}
.d3ac-slide img,
.d3ac-placeholder{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:18px;
  background:#111;
  box-shadow:0 22px 55px rgba(0,0,0,.25);
  filter:grayscale(100%);
  -webkit-user-drag:none;
  user-select:none;
}
.d3ac-placeholder{
  display:grid;
  place-items:center;
  color:#777;
  font-size:36px;
}
.d3ac-slide.is-center{pointer-events:auto}
.d3ac-slide.is-center img{
  box-shadow:0 30px 80px rgba(0,0,0,.34);
}
.d3ac-arrow{
  position:absolute;
  top:calc(50% - 22px);
  z-index:50;
  width:46px;
  height:46px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.88);
  color:#111;
  font-size:35px;
  line-height:38px;
  cursor:pointer;
  box-shadow:0 8px 30px rgba(0,0,0,.16);
  transition:transform .2s ease, background .2s ease;
}
.d3ac-arrow:hover{transform:scale(1.08);background:#fff}
.d3ac-prev{left:18px}
.d3ac-next{right:18px}
.d3ac-dots{
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  display:flex;
  gap:7px;
  z-index:60;
}
.d3ac-dot{
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#aaa;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.d3ac-dot.is-active{background:#111;transform:scale(1.45)}
.d3ac-wrap.is-dragging{cursor:grabbing}
.d3ac-wrap.is-dragging .d3ac-slide{transition:none}
@media (max-width:767px){
  .d3ac-stage{height:280px}
  .d3ac-slide{width:74vw;height:54vw;min-width:220px;min-height:160px}
  .d3ac-arrow{width:38px;height:38px;font-size:29px;line-height:32px}
  .d3ac-prev{left:8px}.d3ac-next{right:8px}
  .d3ac-dots{gap:5px}.d3ac-dot{width:6px;height:6px}
}