.chroma-grid{grid-template-columns:repeat(var(--cols,3), minmax(0, 1fr));box-sizing:border-box;--x:50%;--y:50%;--r:450px;gap:1.5rem;width:100%;max-width:100%;margin:0;padding:0;display:grid;position:relative}@media (max-width:1024px){.chroma-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}}@media (max-width:640px){.chroma-grid{grid-template-columns:minmax(0,1fr);gap:1.25rem}}.chroma-card{background:var(--card-gradient,#1c1c1e);--mouse-x:50%;--mouse-y:50%;--spotlight-color:#ffffff38;border:1px solid #ffffff1f;border-radius:1.25rem;flex-direction:column;width:100%;height:100%;transition:border-color .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s;display:flex;position:relative;overflow:hidden}@media (hover:hover) and (pointer:fine){.chroma-card:hover{border-color:var(--card-border,var(--color-theme-accent,#c27852));transform:translateY(-4px);box-shadow:0 24px 48px -12px #00000080,0 8px 24px -8px #0000004d}.chroma-card:hover:before{opacity:1}.chroma-card:hover .chroma-img-wrapper img{transform:scale(1.04)}.chroma-card:hover .chroma-info-arrow{background:var(--card-border,#c27852);color:#fff;transform:translate(2px,-2px)}}@media (hover:none),(pointer:coarse){.chroma-card:active{transition:transform .15s;transform:scale(.99)}}.chroma-card:before{content:"";background:radial-gradient(circle 240px at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 75%);pointer-events:none;opacity:0;z-index:2;transition:opacity .5s;position:absolute;inset:0}.chroma-img-wrapper{z-index:1;aspect-ratio:4/3;box-sizing:border-box;background:0 0;width:100%;padding:.625rem;position:relative;overflow:hidden}.chroma-img-wrapper img{object-fit:cover;border-radius:.875rem;width:100%;height:100%;transition:transform .7s cubic-bezier(.16,1,.3,1);display:block}.chroma-info{z-index:1;color:#fff;flex-direction:column;gap:.35rem;padding:.875rem 1.25rem 1.25rem;display:flex;position:relative}.chroma-info-header{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.chroma-info .name{letter-spacing:-.02em;color:#fff;margin:0;font-size:1.25rem;font-weight:500;line-height:1.2}.chroma-info .role{letter-spacing:.04em;text-transform:uppercase;color:#ffffff8c;margin:0;font-size:.8125rem;font-weight:500}.chroma-info-arrow{color:#ffffffb3;background:#ffffff14;border:1px solid #ffffff1f;border-radius:9999px;flex-shrink:0;justify-content:center;align-items:center;width:2rem;height:2rem;transition:background .3s,color .3s,transform .3s;display:flex}@media (hover:hover) and (pointer:fine) and (min-width:769px){.chroma-overlay{pointer-events:none;z-index:3;-webkit-backdrop-filter:grayscale()brightness(.8);-webkit-mask-image:radial-gradient(circle var(--r) at var(--x) var(--y), transparent 0%, transparent 15%, #0000001a 30%, #00000038 45%, #00000059 60%, #00000080 75%, #000000ad 88%, white 100%);mask-image:radial-gradient(circle var(--r) at var(--x) var(--y), transparent 0%, transparent 15%, #0000001a 30%, #00000038 45%, #00000059 60%, #00000080 75%, #000000ad 88%, white 100%);-webkit-mask-image:radial-gradient(circle var(--r) at var(--x) var(--y), transparent 0%, transparent 15%, #0000001a 30%, #00000038 45%, #00000059 60%, #00000080 75%, #000000ad 88%, white 100%);background:0 0;position:absolute;inset:0}.chroma-fade{pointer-events:none;z-index:4;-webkit-backdrop-filter:grayscale()brightness(.8);-webkit-mask-image:radial-gradient(circle var(--r) at var(--x) var(--y), white 0%, white 15%, #ffffffe6 30%, #ffffffc7 45%, #ffffffa6 60%, #ffffff80 75%, #ffffff52 88%, transparent 100%);mask-image:radial-gradient(circle var(--r) at var(--x) var(--y), white 0%, white 15%, #ffffffe6 30%, #ffffffc7 45%, #ffffffa6 60%, #ffffff80 75%, #ffffff52 88%, transparent 100%);-webkit-mask-image:radial-gradient(circle var(--r) at var(--x) var(--y), white 0%, white 15%, #ffffffe6 30%, #ffffffc7 45%, #ffffffa6 60%, #ffffff80 75%, #ffffff52 88%, transparent 100%);opacity:1;background:0 0;transition:opacity .3s;position:absolute;inset:0}}@media (hover:none),(pointer:coarse),(max-width:768px){.chroma-overlay,.chroma-fade{-webkit-backdrop-filter:none!important;display:none!important}}.chroma-slider{scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.chroma-slider::-webkit-scrollbar{display:none}