//
// Grid
// -----------------------------------


.grid {
  display: flex;
  flex-wrap: wrap;
  margin: 1.25rem 0 2.5rem -1.25rem;

  @include screen-medium() {
    margin: .5rem 0 2.5rem -2rem;
  }

  & > * {
    padding: 1.25rem 0 0 1.25rem;

    @include screen-medium() {
      padding: 2rem 0 0 2rem;
    }
  }

  & + .grid {
    margin-top: 0;
  }


  // Column width: Fit

  &.is-col-fit {
    & > * {
      flex: 1;
    }
  }

  &[class*=is-col] {
    & > .is-col-fit {
      flex: 1;
    }
  }


  //
  // Column width: Full
  //

  &.is-col-full {
    & > * {
      width: 100%;
    }
  }

  &[class*=is-col] {
    & > .is-col-full {
      width: 100%;
    }
  }


  //
  // Align: Top
  //

  &.is-row-top {
    align-items: flex-start;
  }


  //
  // Align: Middle
  //

  &.is-row-middle {
    align-items: center;
  }


  //
  // Align: Bottom
  //

  &.is-row-bottom {
    align-items: flex-end;
  }


  //
  // Align: Left
  //

  &.is-col-left {
    justify-content: flex-start;
  }


  //
  // Align: Center
  //

  &.is-col-center {
    justify-content: center;
  }


  //
  // Align: Right
  //

  &.is-col-right {
    justify-content: flex-end;
  }
}


//
// Column size [2|3|4|5|6|7|8|9|10|11|12]
//

@for $i from 2 through 12 {
  .grid.is-col-$(i) {
    & > * {
      width: calc(100% / $(i));
    }
  }
  .grid[class*=is-col] {
    & > .is-col-$(i) {
      width: calc(100% / $(i));
    }
  }

  @include screen-medium() {
    .grid.is-col-medium-$(i) {
      & > * {
        width: calc(100% / $(i));
      }
    }
    .grid[class*=is-col] {
      & > .is-col-medium-$(i) {
        width: calc(100% / $(i));
      }
    }
  }

  @include screen-large() {
    .grid.is-col-large-$(i) {
      & > * {
        width: calc(100% / $(i));
      }
    }
    .grid[class*=is-col] {
      & > .is-col-large-$(i) {
        width: calc(100% / $(i));
      }
    }
  }
}