// ============================================================================
// :: Split
// ============================================================================
/**
 * This layout displays 2 items next to eachother on desktop and below eachother on mobile.
 */

// ============================================================================
// :: Root
// ============================================================================
.l-split {
  height: 100%;
  display: flex;
  flex-direction: column;

  @include respond-at($breakpoint-desktop-default) {
    flex-direction: row;
  }
}

// ============================================================================
// :: Elements
// ============================================================================
.l-split__item {
  height: 100%;

  @include respond-at($breakpoint-desktop-default) {
    height: auto;

    &:not(:last-child){
      margin-right: 5%;
    }
  }
}

// ============================================================================
// :: Modifiers
// ============================================================================
.l-split__item--top {
  height: 30rem;
  padding: 0;

  @include respond-at($breakpoint-tablet-default) {
    margin: 4rem 0 2rem;
  }

  @include respond-at($breakpoint-desktop-default) {
    height: auto;
    margin: 0;
  }
}

.l-split__item--image {

  @include respond-at($breakpoint-desktop-default) {
    width: 60%;
  }
}

.l-split__item--content {

  @include respond-at($breakpoint-desktop-default) {
    width: 40%;
  }
}