/* Basic grid Styles */
.grid {
  display: flex;
  
  /* Wrap on new row */
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.grid-cell {
  flex: 1;
}

/* Responsive images */
.grid-cell img {
  width: 100%;
  height: auto;
}

/* With gutters */
.grid--gutters {
  margin: 0 0 0 -6px;
}

.grid--gutters > .grid-cell {
  padding: 0 0 0 6px;
}

/* Alignment per row */
.grid--top {
  align-items: flex-start;
}

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

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

/* Alignment per cell */
.grid-cell--top {
  align-self: flex-start;
}

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

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

/* Base classes for all media */
.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%;
}

/* Small to medium screens */
@media (min-width: 24em) {
  .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%;
  }
}

/* Large screens */
@media (min-width: 48em) {
  .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%;
  }
}