.split-view--photo {

  .media-block {
    @include viewport--m {
      height: $baseline * 25;
      overflow: hidden;
      position: relative;

      &.media-block--for-text {
        height: unset;
        min-height: $baseline * 25;
      }
    }

    @include viewport--l {
      height: auto;
      position: absolute;
    }

    img {
      @include viewport--m('inversed') {
        height: auto;
        position: static;
        transform: none;
      }

      @include viewport--m {
        position: absolute;
      }

      @include viewport--l {
        bottom: auto;
      }
    }
  }

  .banner__content {
    @include viewport--l {
    width: grid-columns(5, 12);

    &--on-grid {
      width: unset;
    }
    }
  }
}