:root {
  --grid-gap: var(--size-6);
  --grid-cols: 1fr;
  --grid-rows: 1fr;
  --grid-template-columns: repeat(auto-fill, minmax(min(100%, 1fr), 1fr));
  --grid-template-rows: repeat(auto-fill, minmax(min(100%, 1fr), 1fr));
}

.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: var(--grid-template-columns);
  grid-template-rows: var(--grid-template-rows);

  @media (width < 64rem) {
    --grid-template-columns: repeat(auto-fill, minmax(min(100%, 1fr), 1fr));
    --grid-column-span: 1;
  }
}

.grid--cols-2 {
  @media (width >= 64rem) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid--span-2 {
  grid-column: span var(--grid-column-span, 2);
}

.grid--span-3 {
  grid-column: span var(--grid-column-span, 3);
}