/* 12 Column Grid System */

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--spacing-md) * -1);
}

.col {
  flex: 1 0 0%;
  padding: 0 var(--spacing-md);
}

/* Column sizes */
.col-1 { flex: 0 0 auto; width: 8.333333%; padding: 0 var(--spacing-md); }
.col-2 { flex: 0 0 auto; width: 16.666667%; padding: 0 var(--spacing-md); }
.col-3 { flex: 0 0 auto; width: 25%; padding: 0 var(--spacing-md); }
.col-4 { flex: 0 0 auto; width: 33.333333%; padding: 0 var(--spacing-md); }
.col-5 { flex: 0 0 auto; width: 41.666667%; padding: 0 var(--spacing-md); }
.col-6 { flex: 0 0 auto; width: 50%; padding: 0 var(--spacing-md); }
.col-7 { flex: 0 0 auto; width: 58.333333%; padding: 0 var(--spacing-md); }
.col-8 { flex: 0 0 auto; width: 66.666667%; padding: 0 var(--spacing-md); }
.col-9 { flex: 0 0 auto; width: 75%; padding: 0 var(--spacing-md); }
.col-10 { flex: 0 0 auto; width: 83.333333%; padding: 0 var(--spacing-md); }
.col-11 { flex: 0 0 auto; width: 91.666667%; padding: 0 var(--spacing-md); }
.col-12 { flex: 0 0 auto; width: 100%; padding: 0 var(--spacing-md); }

/* Offset classes */
.offset-1 { margin-left: 8.333333%; }
.offset-2 { margin-left: 16.666667%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.333333%; }
.offset-5 { margin-left: 41.666667%; }
.offset-6 { margin-left: 50%; }

/* Gutter variations */
.g-0 { margin: 0; }
.g-0 > .col,
.g-0 > [class*="col-"] { padding: 0; }

.g-1 { margin: calc(var(--spacing-xs) * -1); }
.g-1 > .col,
.g-1 > [class*="col-"] { padding: var(--spacing-xs); }

.g-2 { margin: calc(var(--spacing-sm) * -1); }
.g-2 > .col,
.g-2 > [class*="col-"] { padding: var(--spacing-sm); }

.g-3 { margin: calc(var(--spacing-md) * -1); }
.g-3 > .col,
.g-3 > [class*="col-"] { padding: var(--spacing-md); }

.g-4 { margin: calc(var(--spacing-lg) * -1); }
.g-4 > .col,
.g-4 > [class*="col-"] { padding: var(--spacing-lg); }

/* Justify content */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

/* Align items */
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; }

/* Grid auto-fit */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

.grid-auto-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.grid-auto-lg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--spacing-xl);
}

/* Fixed grid */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
}