@import "variables";
/**
  Mixin
 */
@mixin create-breakpoint($breakpoint) {
  @if(nth($breakpoint, 2) == 0) {
    @content
  } @else {
    @media screen and (min-width: nth($breakpoint, 2) * 1px) {
      @content
    }
  }
}

/**
  Logic
 */

.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.container-fluid {
  max-width: 100%;
  margin: 0;
}

@each $grid-breakpoint in $grid-breakpoints {
  @include create-breakpoint($grid-breakpoint) {
    .container {
      @if(map_get($container-max-width, nth($grid-breakpoint, 1)) == null) {
        max-width: 100%;
      } @else {
        max-width: map_get($container-max-width, nth($grid-breakpoint, 1))*1px;
      }
      margin: 0 auto;
    }
  }
}

@for $i from 1 through $gris-columns {
  .col-#{$i} {
    $width: (100 / ($gris-columns / $i)) * 1%;
    flex-basis: $width;
    max-width: $width;
  }
}

@each $grid-breakpoint in $grid-breakpoints {
  @include create-breakpoint($grid-breakpoint) {
    @if(nth($grid-breakpoint, 2) != 0) {
      @for $i from 1 through $gris-columns {
        $width: (100 / ($gris-columns / $i)) * 1%;
        .col-#{nth($grid-breakpoint, 1)}-#{$i} {
          flex-basis: $width;
          max-width: $width;
        }
      }
    }
  }
}