@mixin flex-list(
  $cols: 3,
  $margin: 10,
  $first_bp: map-get($breakpoints, "tablet"),
  $second_bp: map-get($breakpoints, "desktop"),
  $third_bp: map-get($breakpoints, "large")
){
  $first_bp: strip-units($first_bp);
  $second_bp: strip-units($second_bp);
  $third_bp: strip-units($third_bp);
  display: flex;
  flex-flow: row wrap;
  > * {
    width: 100%;
    &:last-child {
      margin-right: 0;
    }
    // si 2 colonnes
    @if $cols == 2 {
      @media screen and (min-width: #{$first_bp}px) {
        $width: (100 - $margin)/2;
        width: $width * 1%;
        margin-right: $margin * 1%;
        &:nth-child(2n+2){
          margin-right: 0;
        }
      }
    }
    // si 3 colonnes
    @if $cols == 3 {
      @media screen and (min-width: #{$first_bp}px) and (max-width:#{$second_bp - 1}px) {
        $width: (100 - $margin)/2;
        width: $width * 1%;
        margin-right: $margin * 1%;
        &:nth-child(2n+2){
          margin-right: 0;
        }
      }
      @media screen and (min-width: #{$second_bp}px) {
        $width: (100 - ($margin * 2))/3;
        width: $width * 1%;
        margin-right: $margin * 1%;
        &:nth-child(3n+3){
          margin-right: 0;
        }
      }
    }
    // si 4 colonnes
    @if $cols == 4 {
      @media screen and (min-width: #{$first_bp}px) and (max-width:#{$second_bp - 1}px) {
        $width: (100 - $margin)/2;
        width: $width * 1%;
        margin-right: $margin * 1%;
        &:nth-child(2n+2){
          margin-right: 0;
        }
      }
      @media screen and (min-width: #{$second_bp}px) and (max-width:#{$third_bp - 1}px) {
        $width: (100 - $margin * 2)/3;
        width: $width * 1%;
        margin-right: $margin * 1%;
        &:nth-child(3n+3){
          margin-right: 0;
        }
      }
      @media screen and (min-width: #{$third_bp}px) {
        $width: (100 - ($margin * 3))/4;
        width: $width * 1%;
        margin-right: $margin * 1%;
        &:nth-child(4n+4){
          margin-right: 0;
        }
      }
    }
    // si 5 colonnes
    @if $cols == 5 {
      @media screen and (min-width: #{$first_bp}px) and (max-width:#{$second_bp - 1}px) {
        $width: (100 - $margin)/2;
        width: $width * 1%;
        margin-right: $margin * 1%;
        &:nth-child(2n+2){
          margin-right: 0;
        }
      }
      @media screen and (min-width: #{$second_bp}px) and (max-width:#{$third_bp - 1}px) {
        $width: (100 - $margin * 2)/3;
        width: $width * 1%;
        margin-right: $margin * 1%;
        &:nth-child(3n+3){
          margin-right: 0;
        }
      }
      @media screen and (min-width: #{$third_bp}px) {
        $width: (100 - ($margin * 4))/5;
        width: $width * 1%;
        margin-right: $margin * 1%;
        &:nth-child(5n+5){
          margin-right: 0;
        }
      }
    }
  }
}
// @include flexList(3, 10, 500px, 900px);
// @include flexList(4, 1, 500px, 900px, 900px);
// @include flexList(5, 5, map-get($breakpoints, "tablet"), map-get($breakpoints, "desktop"), map-get($breakpoints, "large"));