// RAMEN GRID OBJECT
//
//
// Required Global Variables:
// $grid-columns
// $grid-gutter
// $grid-gutter-small
// $grid-gutter-medium
// $grid-gutter-large
//
//
// Required Component Variables:
//
// N/A
//
//

@mixin grid {
  align-content: start;
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  margin: 0 (-$grid-gutter / 2);

  @include breakpoint($bp-small) {
    margin: 0 (-$grid-gutter-small / 2);
  }

  @include breakpoint($bp-medium) {
    margin: 0 (-$grid-gutter-medium / 2);
  }

  @include breakpoint($bp-large) {
    margin: 0 (-$grid-gutter-large / 2);
  }

  &.has-carousel {
    display: block;
  }
}

@mixin grid-reverse {
  flex-direction: row-reverse;
}

.o-grid {
  @include grid;

  &--reverse {
    @include grid-reverse;
  }
}