
.image-embed-item {
  @include img-fluid();
  display: block;
  .ce-right & {
    margin-right: 0;
  }
  .ce-center & {
    margin-left: auto;
    margin-right: auto;
  }
}


.image-caption {
  @extend .figure-caption
}


.ce-row {
  @include make-row();

  &:last-child {
    margin-bottom: 0;
  }
}


.ce-column {
  @include make-col-ready();
  padding-left: $grid-gutter-width/2;
  padding-right: $grid-gutter-width/2;

  @for $ce-columns from 1 through 5 {
    [data-ce-columns="#{$ce-columns}"] & {
      @include make-col($grid-columns / $ce-columns);
    }
  }
}



.ce-type-textpic {

}

.ce-textpic {
  @include make-row;
  display: flex;
  align-items: center;

  .ce-gallery, .ce-bodytext {
    @include make-col-ready();
    @include make-col(12);

  }

  //Text LEFT
  &.ce-left {
    flex-direction: row;
  }

  //Text RIGHT
  &.ce-right {
    flex-direction: row-reverse;
  }

  &.ce-right, &.ce-left {
    .ce-gallery, .ce-bodytext {
      @include media-breakpoint-up(md) {
        @include make-col(6)
      }
    }
  }

  &.ce-above {
    flex-direction: column;
  }
}


$bubble1: '<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 600 600"><path d="M0,0V600H600V0ZM582.4,358.8c-26.2,80-84,142.6-159.7,186.5s-169.2,69.4-248,40.2S32.1,472.6,10.5,378.7,9,180.5,67.4,109.5,222.1.8,316.9,2s188,41.6,237.3,110.5S608.6,278.9,582.4,358.8Z" style="fill:XXXXXX"/></svg>';
$bubble2: '<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 600 600"><path d="M0,0V600H600V0ZM597.8,369.5c-3,79.8-51.8,169.8-133.4,207.5s-209.5,21.4-277-22.8C98.9,492.4,57.1,425.9,17.2,335.5-5.5,278.7-7.4,182.9,43.7,114.7S217.6-7.1,299.3,3.3,448.3,82,503.2,151,601,289.6,597.8,369.5Z" style="fill:XXXXXX"/></svg>';
$bubble3: '<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 600 600"><path d="M0,0V600H600V0ZM589.6,404.6C563.8,493.4,452.4,585,370.3,596.4S211,559.4,163.7,514s-64.2-88.3-112-160.5S-9.7,227.6,12,149.2,180.4-5,292.4,2.5,442.3,31.3,511.2,119.7,615.3,315.5,589.6,404.6Z" style="fill:XXXXXX"/></svg>';
$bubble4: '<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 600 600"><path d="M0,0V600H600V0ZM565.3,372.6c-36.2,80.1-95.7,127.7-163.5,167.6S258,612,183.3,591.7,34.8,498.8,10.9,407.2s1.8-202,61.1-279.3S224.4,7,322.5,2.4,523.8,32.6,569.1,106.1,601.4,292.5,565.3,372.6Z" style="fill:XXXXXX"/></svg>';
$bubble5: '<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 600 600"><path d="M0,0V600H600V0ZM408.1,566.5c-73.4,57.8-296.7,34.2-350.2-55.8-68.3-115.1-80.5-261.7,0-395.1C139.6-19.7,439.6-69.6,563.5,168.5,656.2,346.6,547.6,456.7,408.1,566.5Z" style="fill:XXXXXX"/></svg>';

//@each $color, $value in $colors {
//  .bg-#{$color} .ce-border .image::after {
//    content: url(svg-encode($bubble1, $value));
//  }
//}

.ce-border .image {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: -1px;
    bottom: -1px;
    //width: 100%;
    //height: 100%;
    pointer-events: none;
    background: transparent url(svg-encode($bubble1, $body-bg)) no-repeat center center;
    background-size: cover;
  }
}


// fake random bubble masks

@each $i in (1, 6) {
  @each $color, $value in map-remove($colors, light) {
    [id$='#{$i}'].bg-#{$color} .ce-border .image::after {
      background-image: url(svg-encode($bubble1, $value));
    }
  }
}


@each $i in (2, 7) {
  @each $color, $value in map-remove($colors, light) {
    [id$='#{$i}'].bg-#{$color} .ce-border .image::after {
      background-image: url(svg-encode($bubble2, $value));
    }
  }
}


@each $i in (3, 8) {
  @each $color, $value in map-remove($colors, light) {
    [id$='#{$i}'].bg-#{$color} .ce-border .image::after {
      background-image: url(svg-encode($bubble3, $value));
    }
  }
}


@each $i in (4, 9) {
  @each $color, $value in map-remove($colors, light) {
    [id$='#{$i}'].bg-#{$color} .ce-border .image::after {
      background-image: url(svg-encode($bubble4, $value));
    }
  }
}


@each $i in (5, 0) {
  @each $color, $value in map-remove($colors, light) {
    [id$='#{$i}'].bg-#{$color} .ce-border .image::after {
      background-image: url(svg-encode($bubble5, $value));
    }
  }
}
