.grid {
  margin-left: 8px;
  margin-right: 8px;
  display: grid;
  grid-auto-rows: auto;
  grid-auto-flow: row;
  grid-template-columns: repeat(1, 1fr);

  @include breakpoint($medium) {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}

.grid__1,
.grid__2,
.grid__3,
.grid__4,
.grid__all { grid-column: auto; }

.grid__2 { 
  @include breakpoint($medium) { grid-column: auto / span 2; }
}

.grid__3 { 
  @include breakpoint($medium) { grid-column: auto / span 3; }
}
.grid__all { 
  @include breakpoint($medium) { grid-column: 1 / -1; }
}

.grid--2-col {
  @include breakpoint($medium) { grid-template-columns: repeat(2, minmax(200px, 1fr) ); }
}

.grid--3-col { 
  @include breakpoint($medium) { grid-template-columns: repeat(3, minmax(200px, 1fr) ); }
}

.grid--4-col { 
  @include breakpoint($medium) { grid-template-columns: repeat(4, minmax(200px, 1fr) ); }
}