/* ==========================================================================
   Responsive Grid Layout
   ========================================================================== */

.af-responsive-grid {
  display: grid;
  width: 100%;
  
  /* Base gap using the global spacing variables defined in global.css */
  gap: var(--spacing-lg);
  
  /* * The Magic Formula: 
   * 'auto-fit' tells the browser to create as many columns as possible.
   * 'minmax(280px, 1fr)' ensures no column shrinks below 280px (perfect for cards),
   * but allows them to grow to fill the available space (1fr).
   */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Tablet (768px and up) */
@media (min-width: 768px) {
  .af-responsive-grid {
    /* Increase the breathing room between cards on larger screens */
    gap: var(--spacing-xl);
  }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
  .af-responsive-grid {
    /* Maximum breathing room for high-resolution displays */
    gap: var(--spacing-2xl);
  }
}