//** Basic Grid Styles

.grid {
  @include display-flex;
  // With gutters

  &:not(.__no-gutters) {
    @include grid-gutters(30px);
  }

  &.__gutters_s {
    @include grid-gutters(20px);
  }


  // Alignment per row
  &.__top {
    @include align-items(start);
  }
  &.__bottom {
    @include align-items(end);
  }
  &.__center {
    @include align-items(center);
  }

  &.__dir-col {
    @include flex-direction(column);
  }
}

.grid_cell {
  @include flex(1);
  .__autoflex & {
    @include flex(auto);
  }
  .__flex-cells > & {
    @include display-flex;
  }

  // Alignment per cell
  &.__top {
    @include align-self(start);
  }
  &.__bottom {
    @include align-self(end);
  }
  &.__center {
    @include align-self(center);
  }

  // Width of the cell
  &.__1of2 {
    @include flex(none);
    width: 50%;
  }
  &.__1of3 {
    @include flex(none);
    width: (100%/3);
  }
  &.__1of4 {
    @include flex(none);
    width: 25%;
  }
  &.__1of5 {
    @include flex(none);
    width: 20%;
  }
  &.__1of6 {
    @include flex(none);
    width: (100%/6);
  }
  &[class*="__fix"] {
    @include flex(none);
  }
}

.__fix15 {
  width: $gutter*15;
}


