/* ==========================================================================
   Previous Events Section - Responsive Grid Optimization
   ========================================================================== */

/**
 * Orlando's Professional Approach:
 * - Mobile: 1 column (full attention, easy interaction)
 * - Tablet: 2 columns (balanced, substantial cards)
 * - Desktop: 4 columns (existing layout)
 */

/* Mobile: 1 column for maximum clarity and touch accessibility */
@media (max-width: 767px) {
  .speakers__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-lg, 1.5rem) !important;
    max-width: 400px !important;
    margin: 0 auto !important;
  }
  
  /* Ensure cards are properly sized */
  .speaker-card-bem {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Tablet: 2 columns for better balance */
@media (min-width: 768px) and (max-width: 1023px) {
  .speakers__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-lg, 1.5rem) !important;
    max-width: 700px !important;
    margin: 0 auto !important;
  }
  
  .speaker-card-bem {
    width: 100% !important;
  }
}