/* ==========================================================================
   Products Responsive Media Queries
   Extracted from css/products.css
   ========================================================================== */

@media (max-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .products-hero h1 {
    font-size: 32px;
  }

  .products-hero p {
    font-size: 16px;
  }

  .products-grid {
    grid-template-columns: 1fr;
  }

  .products-cta-banner {
    flex-direction: column;
    text-align: center;
    padding: 36px 24px;
  }

  .cta-banner-btn {
    width: 100%;
    justify-content: center;
  }
}