.product-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(220px, 1fr)
        );

    gap: var(--space-2xl);
    
    margin-bottom: var(--space-xl);
}

@media (max-width: 768px) {

    .product-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: var(--space-lg);
    }
}

@media (max-width: 480px) {

    .product-grid {

        grid-template-columns: 1fr;
    }
}