.ccs{--columns:6;--gap:0px;--arrow-width:100px;--hover-duration:300ms;--entrance-duration:700ms;--motion-distance:7px;--zoom:1.08;--rotation:8deg;--overlay-opacity:.65;position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%;margin-inline:auto;background:#fffef0;border-block:1px solid #cbc9b8;color:#161616;box-sizing:border-box}
.ccs *{box-sizing:border-box}.ccs-viewport{flex:1;min-width:0;overflow:hidden;touch-action:pan-y}.ccs-track{display:flex;gap:var(--gap);will-change:transform}.ccs-card{flex:0 0 calc((100% - (var(--columns) - 1)*var(--gap))/var(--columns));min-width:0;min-height:320px;padding:45px 16px 34px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;text-decoration:none!important;color:inherit;border-inline-end:1px solid #cbc9b8;transition:background-color var(--hover-duration),color var(--hover-duration);user-select:none}.ccs-media{position:relative;display:block;flex-shrink:0;width:180px;max-width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;margin-bottom:20px}.ccs-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--hover-duration);border-radius:inherit}.ccs-media:after{content:"";position:absolute;inset:0;background:#ff0;opacity:0;transition:opacity var(--hover-duration);pointer-events:none;border-radius:inherit}.ccs-card:hover .ccs-media:after,.ccs-card:focus-visible .ccs-media:after{opacity:var(--overlay-opacity)}.ccs[data-hover=none] .ccs-media:after{display:none}.ccs[data-hover=zoom] .ccs-card:hover img{transform:scale(var(--zoom))}.ccs[data-hover=rotate] .ccs-card:hover img{transform:rotate(var(--rotation)) scale(var(--zoom))}.ccs-title{font-family:inherit;font-weight:700;font-size:18px;line-height:1.4;overflow-wrap:anywhere}.ccs-count{font-size:13px;margin-top:5px}.ccs .ccs-arrow{flex:0 0 var(--arrow-width);width:var(--arrow-width);display:flex;align-items:center;justify-content:center;background:#7047b7;color:#fff;border:0;border-radius:0;margin:0;padding:12px;cursor:pointer;transition:background var(--hover-duration),color var(--hover-duration);box-shadow:none}.ccs .ccs-arrow:hover,.ccs .ccs-arrow:focus-visible{background:#ffff54;color:#161616}.ccs .ccs-arrow:disabled{opacity:.4;cursor:default}.ccs-icon{width:58px;max-width:100%;display:block;line-height:1;transition:translate var(--hover-duration)}.ccs-icon svg{display:block;width:100%;height:auto;fill:currentColor}.ccs-icon i{font-size:inherit}.ccs-next .ccs-icon>svg{transform:scaleX(-1)}.ccs-next .ccs-icon>svg:not([viewBox="0 0 64 24"]){transform:none}.ccs[data-motion=nudge] .ccs-next:hover .ccs-icon{translate:var(--motion-distance) 0}.ccs[data-motion=nudge] .ccs-prev:hover .ccs-icon{translate:calc(-1*var(--motion-distance)) 0}.ccs[data-motion=wiggle] .ccs-arrow:hover .ccs-icon{animation:ccs-wiggle var(--wiggle-duration,600ms) ease-in-out infinite}.ccs-dots{flex-basis:100%;display:flex;justify-content:center;gap:8px;padding:14px;flex-wrap:wrap}.ccs .ccs-dots button{width:9px;aspect-ratio:1;border:0;border-radius:50%;padding:0;margin:0;background:#c7b5e6;cursor:pointer}.ccs .ccs-dots button[aria-current=true]{background:#7047b7}.ccs :focus-visible{outline:2px solid #7047b7;outline-offset:-3px}.ccs.ccs-enter[data-entrance=fade]{animation:ccs-fade var(--entrance-duration) both}.ccs.ccs-enter[data-entrance=zoom]{animation:ccs-zoom var(--entrance-duration) both}@keyframes ccs-fade{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes ccs-zoom{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes ccs-wiggle{50%{translate:var(--motion-distance) 0;rotate:5deg}}
@media(max-width:1440px){.ccs{--columns:5;--arrow-width:70px}.ccs-card{min-height:270px;padding:28px 14px}.ccs-media{width:155px}}
@media(max-width:1200px){.ccs{--columns:4}}
@media(max-width:1024px){.ccs{--columns:3;--arrow-width:55px}.ccs-card{min-height:240px}.ccs-media{width:145px}}
@media(max-width:880px){.ccs{--columns:2}}
@media(max-width:767px){.ccs{--columns:1;--arrow-width:45px}.ccs-card{min-height:230px}.ccs-title{font-size:16px}.ccs-media{width:150px}}
@media(prefers-reduced-motion:reduce){.ccs,.ccs *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
