/* 
 * Grid System - Mobile-First & Responsive
 * Breakpoints: 600px (mobile), 900px (tablet)
 * minmax(0, 1fr) מונע overflow בתוכן ארוך
 */
.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Tablet: 3-4 עמודות הופכות ל-2 */
@media (max-width: 900px) { 
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } 
}

/* Mobile: כל הgrids הופכים לעמודה אחת */
@media (max-width: 600px) { 
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } 
}