.work-carousel{--case-width:clamp(340px,56vw,800px);--case-gap:28px;position:relative;min-width:0;width:100%}.work-carousel-viewport{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;touch-action:auto;padding:4px 0 8px;outline-offset:3px}.work-carousel-viewport::-webkit-scrollbar{display:none}.projects.work-carousel-track{display:flex;flex-wrap:nowrap;gap:var(--case-gap);width:max-content;max-width:none;align-items:stretch}.work-carousel-track .project{flex:0 0 var(--case-width);width:var(--case-width);max-width:none;cursor:grab;user-select:none;-webkit-user-select:none}.work-carousel-track .project img{-webkit-user-drag:none}.work-carousel.is-dragging .work-carousel-viewport,.work-carousel.is-dragging .project{cursor:grabbing}.work-carousel.is-dragging .project-media img{transform:none}.carousel-side{position:absolute;z-index:3;top:calc(var(--case-width)*.3125 + 4px);transform:translateY(-50%);display:grid;place-items:center;width:54px;height:54px;border:1px solid #ffffff70;border-radius:50%;background:#101010aa;backdrop-filter:blur(10px);color:#fff;box-shadow:0 3px 20px #0002;transition:background .2s,color .2s,border-color .2s}.carousel-side.previous{left:18px}.carousel-side.next{right:18px}.carousel-side svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.carousel-side:hover{background:#eee;color:#111;border-color:#eee}.carousel-footer{margin-top:28px;padding-top:20px;border-top:1px solid #33332f;text-align:center}.carousel-footer p{font-size:10px;color:#8f8f87;letter-spacing:1px;margin:0}.work-carousel-viewport:focus-visible{outline:1px solid #ccc}.work-carousel-track .project:focus-visible{outline:2px solid #ddd;outline-offset:-2px}
@media(max-width:800px){.work-carousel{--case-width:72vw;--case-gap:20px}.carousel-side{width:44px;height:44px}.carousel-side.previous{left:10px}.carousel-side.next{right:10px}.carousel-side svg{width:23px;height:23px}.carousel-footer{margin-top:24px;padding-top:17px}}
@media(max-width:500px){.work-carousel{--case-width:76vw;--case-gap:12px}.carousel-side{width:37px;height:37px}.carousel-side.previous{left:5px}.carousel-side.next{right:5px}.carousel-side svg{width:21px;height:21px}.carousel-footer p{font-size:9px;letter-spacing:.5px}.work-carousel-track .project-info h3{font-size:15px}.work-carousel-track .project-info p{font-size:9px}}

.work-carousel-track .project[data-project="huawei-nova"] .project-media>img{object-fit:contain;background:linear-gradient(rgb(166, 212, 254),rgb(98, 115, 130))}
