.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    width: 100%;
}

.grid-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background:
        linear-gradient(180deg, rgba(179,255,0,.07), rgba(179,255,0,.018)),
        rgba(0,0,0,.18);
    border: 1px solid rgba(179,255,0,.18);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 16px 48px rgba(0,0,0,.22);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.grid-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, transparent, rgba(179,255,0,.08), transparent 44%);
    opacity: 0;
    transition: opacity .22s ease;
}

.grid-card:hover {
    transform: translateY(-4px);
    border-color: rgba(179,255,0,.42);
    background:
        linear-gradient(180deg, rgba(179,255,0,.095), rgba(179,255,0,.025)),
        rgba(0,0,0,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 70px rgba(0,0,0,.34), 0 0 28px rgba(179,255,0,.065);
}

.grid-card:hover::after { opacity: 1; }

.grid-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    filter: saturate(.88) contrast(1.04);
    border-bottom: 1px solid rgba(179,255,0,.13);
}

.grid-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .55rem;
    padding: var(--space-3);
}

.grid-card-type { color: var(--phosphor-dim); }

.grid-card-content h3 {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: normal;
    line-height: 1.12;
    color: var(--phosphor-soft);
}

.grid-card-content p {
    margin: 0;
    color: var(--text-soft);
    font-size: var(--text-sm);
}