.chroma-grid{position:relative;width:100%;height:100%;display:grid;grid-template-columns:repeat(var(--cols,3),280px);grid-auto-rows:auto;justify-content:center;gap:.75rem;max-width:1200px;margin:0 auto;padding:1rem;box-sizing:border-box}@media (max-width:900px){.chroma-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.5rem;padding:.5rem}}@media (max-width:480px){.chroma-grid{grid-template-columns:minmax(0,1fr);gap:.75rem;padding:1rem}}.chroma-card{position:relative;display:flex;flex-direction:column;width:100%;height:auto;border-radius:10px;overflow:hidden;border:none;background:transparent;--mouse-x:50%;--mouse-y:50%;--spotlight-color:rgba(255,255,255,0.3)}.chroma-card:hover{border-color:transparent}.chroma-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mouse-x) var(--mouse-y),var(--spotlight-color),transparent 70%);pointer-events:none;opacity:0;transition:opacity .5s ease;z-index:2}.chroma-card:hover:before{opacity:1}.chroma-img-wrapper{position:relative;z-index:1;flex:1;padding:0;box-sizing:border-box;background:transparent;transition:background .3s ease}.chroma-img-wrapper img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block;filter:grayscale(100%);transition:filter .4s ease-in-out}.chroma-card.is-activated .chroma-img-wrapper img,.chroma-card:hover .chroma-img-wrapper img{filter:grayscale(0)}.chroma-card.is-activated:before{opacity:1}.chroma-info{display:none}.chroma-info .handle,.chroma-info .role{color:#aaa}