/*===============================================================================
 * 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 / 6;
    grid-row: 1;
    padding: 0 $grid-gutter;

    &:last-child{
      grid-row: 2;
      margin-top: 40px;
    }
  }

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

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

.l-split__column--flex-start{
  align-self: flex-start;
}

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

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

.l-split--invert-on-mobile {
  @include mq($max: $l-split-bp) {
    .l-split__column{
      grid-row: 2;

      &:last-child{
        grid-row: 1;
        margin-top: 0;
        margin-bottom: 40px;
      }
    }
  }
}