/*==========================================================================
 * Post grid
 *
 * The post grid layout is a stacked list if items on small viewports
 * When enough room is available it will put more items on a row.
 * The maximum number of items in a row is 4, then it wraps to the next row.
 * ========================================================================== */

/**
 * Magic numbers to make the gutter a percentage value so it scales nicely
 * Value is based on the largest possible width of the container,
 * with the negative margin on the component taken into account
 */

$l-card-grid-gutter: 			40px;
$l-card-grid-large-gutter: 			60px;

.l-post-grid {
  margin: auto;

  @include mq(500) {
    @include flex(flex-start flex-start wrap);
    margin: -#{$l-card-grid-gutter / 2}; // Negative margin to compensate the extra margin on the items
  }

  @include mq(1100) {
    margin: -#{$l-card-grid-large-gutter / 2}; // Negative margin to compensate the extra margin on the items
  }
}

.l-post-grid__item {

  @include mq($max: 500) {
    margin: 0 auto;
    width: 100%;
    max-width: 440px;
    @include owl(6vh);
  }


  @include mq(500, 1100) {
    width: calc(50% - #{$l-card-grid-gutter});
    margin: #{$l-card-grid-gutter / 2};

    @include mq(800) {
      width: calc(33.33% - #{$l-card-grid-gutter});
    }
  }

  @include mq(1100) {
    width: calc(33.33% - #{$l-card-grid-large-gutter});
    margin: #{$l-card-grid-large-gutter / 2};

    @include mq(1280) {
      width: calc(25% - #{$l-card-grid-large-gutter});
    }
  }
}