#grid-eligible,
#grid-ineligible {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}

#grid-eligible > *,
#grid-ineligible > * {
    height: 100%;
}

@media (min-width: 769px) and (max-width: 1023px) {
    #grid-eligible,
    #grid-ineligible {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    #grid-eligible {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    #grid-eligible > *:nth-child(-n+3) {
        grid-column: span 2;  /* 3 cards × 2 = 6 */
    }

    #grid-eligible > *:nth-child(n+4) {
        grid-column: span 3;  /* 2 cards × 3 = 6 */
    }

    /* Ineligible: 4 on top, 3 wide below (7 items) */
    #grid-ineligible {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    /* First 4 cards: 4 per row */
    #grid-ineligible > *:nth-child(-n+4) {
        grid-column: span 3;  /* 4 cards × 3 = 12 */
    }

    /* Last 3 cards: 3 per row, wider */
    #grid-ineligible > *:nth-child(n+5) {
        grid-column: span 4;  /* 3 cards × 4 = 12 */
    }
}