/*===============================================================================
 * Split layout in 2 equal columns that are stacked until viewport is wide enough
 * ============================================================================== */


$l-split-bp:              1000;
$l-split-gap:             50px;
$l-split-column-width:    ($grid-max-width - $l-split-gap) / 2;


.l-split {
  display: grid;
  grid-template-columns: minmax($grid-gutter, 1fr) minmax(0, $l-split-column-width) $l-split-gap minmax(0, $l-split-column-width) minmax($grid-gutter, 1fr);
}

.l-split__column {
  @include mq($max: $l-split-bp) {
    grid-column: 1 / -1;
    padding: 0 $grid-gutter;

    & + & {
      margin-top: 40px;
    }

    &:last-child{
      grid-row: 2;
    }
  }

  @include mq($l-split-bp) {
    grid-column: 2 / 3;

    &:last-child{
      grid-column: 4 / 5;
    }
  }
}

.l-split__column--bg {
  padding: 40px $grid-gutter;
  background-color: palette(neutral);

  @include mq($l-split-bp) {
    padding-left: 12%;
    padding-right: 12%;
  }
}