.ce-textpic {
  display: flex;
  align-items: center;
  // Text LEFT
  &.ce-left {
    flex-flow: row-reverse;

    .image:before {
      background: url('../Images/svg/bubble-1.svg');
    }
  }

  // Text RIGHT
  &.ce-right {
    flex-flow: row;

    .image:before {
      background: url('../Images/svg/bubble-2.svg');
    }
  }


  > div {
    margin: $grid-gutter-width / 2;
    flex-basis: calc(50% - #{$grid-gutter-width});
    height: 100%;
  }


  // figure class=image
  figure.image {
    margin: 0;
    padding: 0;

    position: relative;

    &:before {
      content: ' ';

      display: block;

      position: absolute;

      top: -1px;
      left: -1px;
      right: -1px;
      bottom: -1px;



      background-size: contain;
      background-position: center center;
    }
  }

}