Layout Split

@mixin text-image-panels--full-bleed-image($image-url, $overlay-gradient: null, $image-side: left) {
  &__wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  &__panel {
    width: 50%;

    @media only screen and (max-width: $small-screen-max) {
      width: 100%;
    }
  }

  &__panel--image {

    @if $image-side == right {
      order: 2;
    } @else {
      order: 1;
    }

    @if $overlay-gradient == null {
      background-image: url(asset_path($image-url));
    } @else {
      @include imageGradientBlend(asset_path($image-url), map-get($overlay-gradient, dark), map-get($overlay-gradient, medium), map-get($overlay-gradient, light), $blend-mode: unset);
    }

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    @media only screen and (max-width: $small-screen-max) {
      order: 1;
      height: 200px;
    }
  }

  &__panel--content {
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: $base-spacing-xlarge;

    @media only screen and (max-width: $small-screen-max) {
      align-items: center;
      padding: $section-padding--mobile $base-spacing-medium;
    }

    // overwrites padding above
    @if $image-side == right {
      @include container-edge-calc(left, padding);
    } @else {
      @include container-edge-calc(right, padding);
    }

  }
}

@mixin text-image-panels-content {
  [class$='__heading'] {
    @include font-style--xl-light;
    max-width: 25ch;
    margin-bottom: $base-spacing-medium;

    @media only screen and (max-width: $small-screen-max) {
      width: 100%;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }
  }

  [class$='__button'] {
    @media only screen and (max-width: $small-screen-max) {
      width: 100%;
    }
  }
}