// returns grid-item width based on columns number and gutter
// retorna el ancho del grid-item basado en el número de columnas y el gutter
@function item-width($width,$gutter){
  @return calc(#{$width} - #{$gutter});
}

// asigns grid-item width for each breakpoint
@mixin columnWidth($currentBp, $prevBp, $coreBp,$gutter,$selector){
  // check if current breakpoint is not equal to previous breakpoint
  @if $currentBp != $prevBp{
    @include from($coreBp){
      $width: 100% / $currentBp;
      & > #{$selector}{
        width : item-width($width,$gutter);
      }
    }
  }
}

/*
| Mixin para crear cuadriculas
|
| $selector: nombre del selector CSS de cada item de la cuadricula
|
| $listColumns:
|              * lista de numeros de columnas en cada breakpoint. Ej: (1,2,3,4)
|              * usar parenteris "()" si la lista contiene mas de un elemento
|              * el numero de columnas del ultimo breakpoint se hereda a breakpoints superiores
|
| $gutter: separación entre cada item de la cuadricula (opcional)
|
*/

@mixin grid($selector,$listColumns,$gutter:1em){
  // $width sirve para calcular el ancho de cada item
  $width       : 100% / nth($listColumns,1);

  // elimina el espaciado vertical de las imágenes
  img {
    display : block;
  }

  display      : flex;
  flex-wrap    : wrap;
  margin-left  : -($gutter / 2);
  margin-right : -($gutter / 2);

  // Evitar scroll horizontal
  @at-root {
    body {
      overflow-x: hidden;
    }
  }

  // por si el contenedor es un ul
  @if $selector == li {
    margin     : 0;
    padding    : 0;
    list-style : none;

    li {
      margin-left : 0;
      list-style  : none;
    }
  }

  & > #{$selector} {
    width  : item-width($width,$gutter);
    margin : $gutter / 2;
  }

  // calculate grid item width for each breakpoint
  $indice: 1;
  $longListColumns: length($listColumns);
  @each $size, $_ in $breakpoints{
    @if $indice > 1 and $indice <= $longListColumns{
      @include columnWidth(nth($listColumns,$indice),nth($listColumns,$indice - 1),$size,$gutter,$selector);
    }
    $indice: $indice + 1;
  }
}