/**
 * Grid System
 */

.o-grid {
  display: grid;
  gap: var(--space-md);
}

.o-grid--gap-sm { gap: var(--space-sm); }
.o-grid--gap-lg { gap: var(--space-lg); }
.o-grid--gap-xl { gap: var(--space-xl); }

.o-grid--2 { grid-template-columns: repeat(2, 1fr); }
.o-grid--3 { grid-template-columns: repeat(3, 1fr); }
.o-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Responsive */
@media (max-width: 768px) {
  .o-grid--2,
  .o-grid--3,
  .o-grid--4 {
    grid-template-columns: 1fr;
  }
}