.grid {
  display: grid;
  gap: var(--space-gutter);
  max-width: var(--max-width);
  margin: 0 auto;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-gutter);
  max-width: var(--max-width);
  margin: 0 auto;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-gutter);
}

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

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

.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-12 { grid-column: span 12; }

.col-start-1  { grid-column-start: 1; }
.col-start-4  { grid-column-start: 4; }
.col-start-7  { grid-column-start: 7; }
.col-start-8  { grid-column-start: 8; }
.col-start-10 { grid-column-start: 10; }

.content-pad {
  padding-left: var(--space-mobile);
  padding-right: var(--space-mobile);
}

@media (min-width: 768px) {
  .content-pad {
    padding-left: var(--space-tablet);
    padding-right: var(--space-tablet);
  }
}

@media (min-width: 1024px) {
  .content-pad {
    padding-left: var(--space-desktop);
    padding-right: var(--space-desktop);
  }
}

@media (max-width: 768px) {
  .grid-12 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid-3 {
    grid-template-columns: 1fr;
  }
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .col-span-3, .col-span-4, .col-span-5,
  .col-span-6, .col-span-7, .col-span-8,
  .col-span-9, .col-span-12 {
    grid-column: span 4;
  }
  .col-start-1, .col-start-4, .col-start-7,
  .col-start-8, .col-start-10 {
    grid-column-start: auto;
  }
}

@media (max-width: 480px) {
  .grid-12 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .grid-4 {
    grid-template-columns: 1fr;
  }
  .col-span-3, .col-span-4, .col-span-5,
  .col-span-6, .col-span-7, .col-span-8,
  .col-span-9, .col-span-12 {
    grid-column: span 2;
  }
}