/* ======================== */
/* Split
/* ======================== */
/* A 50/50 split layout with equal height columns
/* ------------------------ */
.l-split {
  display: flex;

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

.l-split > .o-layout_item {
  flex-basis: 50%;

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

/* ======================== */
/*  Split -- Small
/* ======================== */
/* This applies the split to `sm` and above, is full width on `xs`
/* ------------------------ */
.l-split--sm {
  margin-right: 0;
  margin-left: #{'@margin-right'};

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

.l-split--sm > .o-layout_item {
  flex-basis: 100%;

  margin-right: 0;
  margin-left: #{'@margin-right'};

  @include breakpoint-gte(sm) {
    flex-basis: 50%;

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