frontend/src/css/components/grid.css

/* Grid Layout Responsive Styles */
.grid-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-6);
}

@media (max-width: 639px) {
  .grid-responsive {
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .grid-responsive {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid-responsive {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}