.chroma-grid {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 320px);
    grid-auto-rows: auto;
    justify-content: center;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;

    --x: 50%;
    --y: 50%;
    --r: 220px;
}

@media (max-width: 1124px) {
    .chroma-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 320px));
        gap: 1rem;
        padding: 0.5rem;
    }
}

@media (max-width: 480px) {
    .chroma-grid {
        grid-template-columns: 320px;
        gap: 1.5rem;
        padding: 1rem;
    }
}

.chroma-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 320px;
    height: auto;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    transition: all 0.3s ease;
    background: var(--card-gradient);
    box-shadow: 0 0 5px var(--card-border);
    animation: neonPulse 2s infinite alternate;

    .chroma-img-wrapper {
        position: relative;
        z-index: 1;
        flex: 1;
        padding: 10px;
        box-sizing: border-box;
        background: transparent;
        transition: background 0.3s ease;
    }

    .chroma-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
        display: block;
    }

    .chroma-info {
        position: relative;
        z-index: 1;
        padding: 0.75rem 1rem;
        color: #fff;
        font-family: system-ui, sans-serif;
        display: grid;
        grid-template-columns: 1fr auto;
        row-gap: 0.25rem;
        column-gap: 0.75rem;
    }

    .chroma-info .role,
    .chroma-info .handle {
        color: #aaa;
    }

    .chroma-overlay {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 3;
        backdrop-filter: grayscale(1) brightness(0.78);
        -webkit-backdrop-filter: grayscale(1) brightness(0.78);
        background: rgba(0, 0, 0, 0.001);

        mask-image: radial-gradient(circle var(--r) at var(--x) var(--y),
                transparent 0%,
                transparent 15%,
                rgba(0, 0, 0, 0.1) 30%,
                rgba(0, 0, 0, 0.22) 45%,
                rgba(0, 0, 0, 0.35) 60%,
                rgba(0, 0, 0, 0.5) 75%,
                rgba(0, 0, 0, 0.68) 88%,
                white 100%);
        -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y),
                transparent 0%,
                transparent 15%,
                rgba(0, 0, 0, 0.1) 30%,
                rgba(0, 0, 0, 0.22) 45%,
                rgba(0, 0, 0, 0.35) 60%,
                rgba(0, 0, 0, 0.5) 75%,
                rgba(0, 0, 0, 0.68) 88%,
                white 100%);
    }

    .chroma-fade {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 4;
        backdrop-filter: grayscale(1) brightness(0.78);
        -webkit-backdrop-filter: grayscale(1) brightness(0.78);
        background: rgba(0, 0, 0, 0.001);

        mask-image: radial-gradient(circle var(--r) at var(--x) var(--y),
                white 0%,
                white 15%,
                rgba(255, 255, 255, 0.9) 30%,
                rgba(255, 255, 255, 0.78) 45%,
                rgba(255, 255, 255, 0.65) 60%,
                rgba(255, 255, 255, 0.5) 75%,
                rgba(255, 255, 255, 0.32) 88%,
                transparent 100%);

        -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y),
                white 0%,
                white 15%,
                rgba(255, 255, 255, 0.9) 30%,
                rgba(255, 255, 255, 0.78) 45%,
                rgba(255, 255, 255, 0.65) 60%,
                rgba(255, 255, 255, 0.5) 75%,
                rgba(255, 255, 255, 0.32) 88%,
                transparent 100%);

        opacity: 1;
        transition: opacity 0.25s ease;
    }
}