.grid {
  display: flex;
  &.grid--stack {
    flex-direction: column;
  }
}

.grid--gutters {
  & > .grid-cell {
    padding-left: 20px;
    padding-right: 20px;
  }
}

// grid has gutters between the cells but not at the start or end.
.grid--margin {
  & > .grid-cell + .grid-cell {
    margin-left: 1em;
  }
}

.grid-cell {
  flex: 1;
}

// squashes the flex content down to the smallest possible
// size to let other cells expand and fill the gap.
.grid-cell--squash {
  flex: 0 1 0%;
}

.grid {
  // 840px seems a big large for this to trigger?
  @media @desktop {
    display: flex;
  }
  &.grid--stack {
    flex-direction: column;
  }
}

.grid--gutters {
  & > .grid-cell {
    padding-left: 20px;
    padding-right: 20px;
  }
}

// grid has gutters between the cells but not at the start or end.
.grid--margin {
  & > .grid-cell + .grid-cell {
    margin-left: 1em;
  }
}

.grid-cell {
  flex: 1;
}

// squashes the flex content down to the smallest possible
// size to let other cells expand and fill the gap.
.grid-cell--squash {
  flex: 0 1 0%;
}

Change to use flex if viewport is wide enough.
Change to use flex if viewport is wide enough.
