/* https://philipwalton.github.io/solved-by-flexbox/demos/grids/ */

.Grid {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.Grid-cell {
  flex: 1;
}

.Grid--flexCells > .Grid-cell {
  display: flex;
}

.Grid--top {
  align-items: flex-start;
}

.Grid--bottom {
  align-items: flex-end;
}

.Grid--center {
  align-items: center;
}

.Grid--justifyCenter {
  justify-content: center;
}

.Grid-cell--top {
  align-self: flex-start;
}

.Grid-cell--bottom {
  align-self: flex-end;
}

.Grid-cell--center {
  align-self: center;
}

.Grid-cell--autoSize {
  flex: none;
}

.Grid--fit > .Grid-cell {
  flex: 1;
}

.Grid--full > .Grid-cell {
  flex: 0 0 100%;
}

.Grid--1of2 > .Grid-cell {
  flex: 0 0 50%;
}

.Grid--1of3 > .Grid-cell {
  flex: 0 0 33.3333%;
}

.Grid--1of4 > .Grid-cell {
  flex: 0 0 25%;
}

@media {
  .small-Grid--fit > .Grid-cell {
    flex: 1;
  }
  .small-Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  .small-Grid--1of2 > .Grid-cell {
    flex: 0 0 50%;
  }
  .small-Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%;
  }
  .small-Grid--1of4 > .Grid-cell {
    flex: 0 0 25%;
  }
}

@media (min-width: 400px) {
  .med-Grid--fit > .Grid-cell {
    flex: 1;
  }
  .med-Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  .med-Grid--1of2 > .Grid-cell {
    flex: 0 0 50%;
  }
  .med-Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%;
  }
  .med-Grid--1of4 > .Grid-cell {
    flex: 0 0 25%;
  }
}

@media (min-width: 800px) {
  .large-Grid--fit > .Grid-cell {
    flex: 1;
  }
  /*
  .large-Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  .large-Grid--1of2 > .Grid-cell {
    flex: 0 0 50%;
  }
  .large-Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%;
  }
  .large-Grid--1of4 > .Grid-cell {
    flex: 0 0 25%;
  }
  */
}

/* grid gutters */
.Grid--gutters {
  margin: 0px 0px 0px -2em; /* -3rem 0 0em -3rem; */
}
.Grid--gutters > .Grid-cell {
  padding: 0px 0px 0px 2em; /* 3rem 0 0 3rem; */
}