///*---
/// title: Flex Grid
/// section: flex
/// ---

/// ### flex-grid
///
/// .flex-grid-4 {
///   display: flex;
///   flex-wrap: wrap;
///   align-items: stretch;
///   justify-content: space-between;
/// }
/// .flex-grid-4 > * {
///   display: flex;
///   flex-direction: column;
///   flex: 1 1 23.5%;
///   max-width: 25%;
///   padding: 1em 1% 1em 1%;
/// }
/// @media (min-width: 850px) {
///   .flex-grid-4 > *:nth-child(-n+4) { padding-top: 0; }
///   .flex-grid-4 > *:nth-child(4n+1) { padding-left: 0; }
///   .flex-grid-4 > *:nth-child(4n) { padding-right: 0; }
/// }
/// @media (max-width: 850px) {
///   .flex-grid-4 > * {
///     flex-basis: 30%;
///     max-width: 33%;
///   }
///   .flex-grid-4 > *:nth-child(-n+3) { padding-top: 0; }
///   .flex-grid-4 > *:nth-child(3n+1) { padding-left: 0; }
///   .flex-grid-4 > *:nth-child(4n) { padding-right: 0; }
/// }
/// @media (max-width: 660px) {
///   .flex-grid-4 > * {
///     flex-basis: 46%;
///     max-width: 50%;
///   }
///   .flex-grid-4 > *:nth-child(2n) { margin: 0 0 0 2%; }
///   .flex-grid-4 > *:nth-child(2n+1) { margin: 0 2% 0 0; }
/// }
/// @media (max-width: 500px) {
///   .flex-grid-4 > * {
///     flex-grow: 1;
///     flex-basis: 100%;
///     margin: 0 auto;
///   }
/// .flex-grid-4 > * > * {
///   flex: 1 1 auto;
///   width: 100%;
///   padding: 0;
///   margin: 0.4em 0 0 0;
/// }
/// .flex-grid-4 > * > *:first-child { flex: 0 0 auto; padding: 0 0 .8em 0; }
/// .flex-grid-4 > * > *:last-child { flex: 0 0 auto; }
/// }
///*/


.flex-grid {
  @include flex_grid(4);

  &-3 { @include flex-grid(3); }
  &-4 { @include flex-grid(4); }
  &-5 { @include flex-grid(5); }
  &-6 { @include flex-grid(6); }
}