/* Grid Utility Classes */

/* Base responsive grid */
.grid {
  display: grid;
  gap: var(--spacing-lg);
}

/* Size variants - controls minimum card width */
.grid--sm {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.grid--md {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid--lg {
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

/* Gap variants */
.grid--gap-sm {
  gap: var(--spacing-sm);
}

.grid--gap-md {
  gap: var(--spacing-md);
}

.grid--gap-lg {
  gap: var(--spacing-lg);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .grid--sm,
  .grid--md,
  .grid--lg {
    grid-template-columns: 1fr;
  }

  .grid,
  .grid--gap-lg {
    gap: var(--spacing-md);
  }
}