.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 1rem; 
}

@media (min-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.75rem; 
    }
}