CSS Grid para cuadrícula de tarjetas responsive

Grid de tarjetas que se adapta de 4 columnas en desktop a 1 columna en móvil.

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .grid { grid-template-columns: 1fr; } }