/* ======================== */
/* Columned
/* ======================== */
/* A multi columned layout that has pre-defined responsiveness to it. Typically
/* used with a card system as they tend to be a smallish fixed width
/* ------------------------ */
.l-columned {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  margin-right: -#{map-get($grid, gutter) / 2};
  margin-left: #{'@margin-right'};
}

.l-columned .l-item {
  flex-basis: 100%;

  margin-right: map-get($grid, gutter) / 2;
  margin-left: #{'@margin-right'};

  @include breakpoint-gte(sm) {
    flex-basis: calc(50% - #{map-get($grid, gutter)});
  }

  @include breakpoint-gte(lg) {
    flex-basis: calc(33.33% - #{map-get($grid, gutter)});
  }
}
