/* Responsive rules: base adjustments and breakpoints. */

/* Responsive adjustments */
@media (min-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
    }
}

@media (min-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr); /* Reduced from 4 to 2 columns for desktop */
    }
}

@media (max-width: 480px) {
    .section-header h1 {
        font-size: 1.3rem;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .product-info h3 {
        font-size: 0.8rem;
    }
}