.chroma-grid{position:relative;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:1200px;margin:0 auto;box-sizing:border-box;--x: 50%;--y: 50%;--r: 300px}@media(max-width:1024px){.chroma-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.chroma-grid{grid-template-columns:repeat(2,1fr)}.chroma-card:nth-child(3n+1){grid-column:span 2}}.chroma-card{position:relative;display:flex;flex-direction:column;padding:2rem;border-radius:1.5rem;overflow:hidden;border:1px solid rgba(255,255,255,.1);transition:border-color .3s ease,transform .3s ease;background:var(--card-gradient);min-height:180px;--mouse-x: 50%;--mouse-y: 50%;--spotlight-color: rgba(255, 255, 255, .15)}.chroma-bg-image{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.15;transition:opacity .3s ease;z-index:0}.chroma-card:hover .chroma-bg-image{opacity:.25}.chroma-card:hover{border-color:var(--card-border);transform:translateY(-4px)}.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-icon-wrapper{position:relative;z-index:1;width:3rem;height:3rem;border-radius:.875rem;background:#ffffff1a;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;transition:background .3s ease,transform .3s ease}.chroma-card:hover .chroma-icon-wrapper{background:var(--card-border);transform:scale(1.1)}.chroma-icon-wrapper svg{width:1.5rem;height:1.5rem;color:#fff;opacity:.9}.chroma-card:hover .chroma-icon-wrapper svg{opacity:1}.chroma-info{position:relative;z-index:1;display:flex;flex-direction:column;gap:.5rem}.chroma-title{font-size:1.125rem;font-weight:700;color:#fff;margin:0;line-height:1.3}.chroma-subtitle{font-size:.875rem;color:#fff9;margin:0;line-height:1.5}.chroma-overlay,.chroma-fade{display:none}