.prismatic-burst-container{width:100%;height:100%;position:relative;overflow:hidden}
.chroma-grid{grid-template-columns:repeat(var(--cols,4),1fr);box-sizing:border-box;--x:50%;--y:50%;--r:300px;grid-auto-rows:minmax(350px,auto);justify-content:center;gap:1.5rem;width:100%;max-width:1400px;height:100%;margin:0 auto;padding:1rem;display:grid;position:relative}@media (max-width:1400px){.chroma-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:1024px){.chroma-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.chroma-grid{grid-template-columns:1fr}}.chroma-card{aspect-ratio:3/4;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);--mouse-x:50%;--mouse-y:50%;--spotlight-color:#ffffff26;background:#14141e99;border:1px solid #ffffff1a;border-radius:20px;flex-direction:column;width:100%;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.chroma-card:hover{border-color:var(--card-border);box-shadow:0 20px 25px -5px #0003,0 10px 10px -5px #0000001a,0 0 20px -5px var(--card-border);z-index:10;transform:translateY(-8px)scale(1.02)}.chroma-card:before{content:"";background:radial-gradient(800px circle at var(--mouse-x)var(--mouse-y),var(--spotlight-color),transparent 40%);pointer-events:none;opacity:0;z-index:2;mix-blend-mode:overlay;transition:opacity .5s;position:absolute;inset:0}.chroma-card:hover:before{opacity:1}.chroma-card:after{content:"";background:var(--card-gradient);opacity:.1;z-index:0;transition:opacity .3s;position:absolute;inset:0}.chroma-card:hover:after{opacity:.2}.chroma-img-wrapper{z-index:1;background:#0f172a;border-radius:12px;flex:1;margin:10px 10px 0;position:relative;overflow:hidden}.chroma-img-wrapper img{object-fit:cover;filter:grayscale(20%);width:100%;height:100%;transition:transform .6s cubic-bezier(.4,0,.2,1)}.chroma-card:hover .chroma-img-wrapper img{filter:grayscale(0%);transform:scale(1.1)}.chroma-info{z-index:2;color:#fff;background:linear-gradient(#0000,#000c);padding:1.25rem 1.5rem;font-family:inherit;position:relative}.chroma-info .name{letter-spacing:-.025em;color:#fff;justify-content:space-between;align-items:center;margin:0;font-size:1.125rem;font-weight:700;line-height:1.4;display:flex}.chroma-info .handle{color:#94a3b8;opacity:0;margin-left:auto;font-size:.875rem;font-weight:400;transition:all .3s;display:block;transform:translate(-10px)}.chroma-card:hover .handle{opacity:1;transform:translate(0)}.chroma-info .role{color:#cadae8;margin-top:.25rem;font-size:.95rem;font-weight:500}.chroma-overlay{pointer-events:none;z-index:3;-webkit-mask-image:radial-gradient(circle var(--r)at var(--x)var(--y),transparent 0%,#0006 40%,white 100%);mask-image:radial-gradient(circle var(--r)at var(--x)var(--y),transparent 0%,#0006 40%,white 100%);-webkit-mask-image:radial-gradient(circle var(--r)at var(--x)var(--y),transparent 0%,#0006 40%,white 100%);-webkit-backdrop-filter:grayscale(.8)brightness(.6);position:absolute;inset:0}.chroma-fade{pointer-events:none;z-index:4;-webkit-mask-image:radial-gradient(circle var(--r)at var(--x)var(--y),white 0%,#ffffff80 40%,transparent 100%);mask-image:radial-gradient(circle var(--r)at var(--x)var(--y),white 0%,#ffffff80 40%,transparent 100%);-webkit-mask-image:radial-gradient(circle var(--r)at var(--x)var(--y),white 0%,#ffffff80 40%,transparent 100%);opacity:1;transition:opacity .25s;position:absolute;inset:0}
