.zp-car{ display:grid; gap:16px; } .zp-car__viewport{ border-radius:var(--radius-xl); border:1px solid rgba(235,241,228,.10); background:rgba(16,21,20,.55); box-shadow:0 18px 70px rgba(0,0,0,.42); overflow:hidden; } .zp-car__track{ display:flex; gap:16px; padding:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; scroll-behavior:smooth; } .zp-car__track::-webkit-scrollbar{display:none} .zp-car__slide{ position:relative; flex:0 0 calc((100% - 32px) / 3); aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; scroll-snap-align:start; border:1px solid rgba(235,241,228,.10); background:linear-gradient(180deg,rgba(16,21,20,.72),rgba(6,8,8,.92)); transform:translate3d(0,0,0); transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; } .zp-car__slide img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;filter:saturate(1.08) contrast(1.02)} .zp-car__slide:hover{transform:translateY(-3px);border-color:var(--zp-stroke-2);box-shadow:var(--shadow-neon)} .zp-car__hint{ position:absolute; inset:10px auto auto 10px; width:40px; height:40px; border-radius:999px; border:1px solid rgba(235,241,228,.12); background:rgba(6,8,8,.32); box-shadow:0 0 0 1px rgba(255,255,255,.06); display:none; } .zp-car__ui{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:8px; } .zp-car__btn{ width:44px; height:44px; border-radius:999px; border:1px solid rgba(235,241,228,.12); background:rgba(16,21,20,.55); cursor:pointer; position:relative; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; color:var(--zp-bone); } .zp-car__btn:hover{transform:translateY(-1px);border-color:var(--zp-stroke-2);box-shadow:var(--shadow-neon)} .zp-car__btn::before{ content:""; position:absolute; inset:0; margin:auto; width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(135deg); } .zp-car__btn[data-car-next]::before{transform:rotate(-45deg)} .zp-car__dots{display:flex;gap:8px;align-items:center} .zp-car__dot{ width:8px; height:8px; border-radius:999px; border:1px solid rgba(235,241,228,.16); background:rgba(235,233,223,.18); padding:0; } .zp-car__dot.is-active{background:var(--zp-accent);border-color:rgba(255,255,255,.10);box-shadow:var(--shadow-neon)} @media (max-width: 992px) { .zp-car__slide { flex: 0 0 calc((100% - 16px) / 2); } } @media (max-width: 680px) { .zp-car__slide { flex: 0 0 100%; } .zp-car__ui { } } @media (prefers-reduced-motion:reduce){ .zp-car__track { scroll-behavior: auto; } .zp-car__slide, .zp-car__btn{transition:none} }