/* ----------------------------------------------------------- */
/* == grids */
/* ----------------------------------------------------------- */

$grid-gutter: 2rem;
$grid-mb: 2rem;

/**
 * Some grid examples
 */

.grid-1 {
  @include grid(1, $grid-gutter, $grid-mb);
}

.grid-2 {
  @include grid(2, $grid-gutter);
}

.grid-2-noGutter {
  @include grid(2, 0, 0);
}

.grid-1-3 {
  @include unequalGrid(1, 3, $grid-gutter, 2rem);
}

.grid-catalog {
  @include grid(4, $grid-gutter, 6rem);
}

@media (max-width: $small) {
  .grid-catalog {
    @include grid(3, $grid-gutter, 4rem);
  }
  .grid-1-s {
    @include grid(1, $grid-gutter);
  }
}

@media (max-width: $xsmall) {
  .grid-catalog {
    @include grid(2, 1rem, 3rem);
  }
}