.chroma-grid{position:relative;width:100%;height:100%;display:grid;grid-template-columns:repeat(var(--cols, 4),1fr);justify-content:center;gap:.75rem;max-width:1200px;margin:0 auto;padding:1rem;box-sizing:border-box;--x: 50%;--y: 50%;--r: 220px}@media (max-width: 1200px){.chroma-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 900px){.chroma-grid{grid-template-columns:repeat(2,1fr);gap:.5rem;padding:.5rem}}@media (max-width: 600px){.chroma-grid{grid-template-columns:repeat(2,1fr);gap:.5rem;padding:.5rem}}.chroma-card{position:relative;display:flex;flex-direction:column;width:100%;aspect-ratio:1/1;border-radius:12px;--spotlight-color: rgba(166, 244, 254, .5);overflow:hidden;border:1px solid hsl(var(--border));transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;background:transparent;--mouse-x: 50%;--mouse-y: 50%}.chroma-card:hover{border-color:var(--card-border);transform:scale(1.02);box-shadow:0 0 30px #a6f4fe66,0 0 60px #904bf54d}.chroma-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at var(--mouse-x) var(--mouse-y),rgba(166,244,254,.6) 0%,rgba(144,75,245,.4) 30%,rgba(204,1,255,.2) 60%,transparent 80%);pointer-events:none;opacity:0;transition:opacity .3s 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%;-o-object-fit:cover;object-fit:cover;display:block}.chroma-overlay,.chroma-fade{display:none}