/*========================================
=            Bildformatierung            =
========================================*/

.ce-gallery {
  > figcaption {
    font-size: @font-size-small;
  }
  > .image {
    overflow: visible;

    width: inherit;
    /* Make images fill their parent's space. Solves IE8. */

    width: 100%;
    -ms-interpolation-mode: bicubic;

    max-width: 100%;

    height: auto;
  }

  img {
    //width: 100%;
    .img-responsive();
  }

}

.ce-image .ce-column {
  padding-top: floor(@grid-gutter-width/4);
  padding-bottom: floor(@grid-gutter-width/4);
}

.image-caption {
  color: @text-muted;
  margin-top: floor(@grid-gutter-width/4);
  .small();

}

/*========================================================
=            Bildelement mit mehreren Bildern            =
========================================================*/

.ce-gallery  {

  .ce-row {
    .make-row(floor(@grid-gutter-width/2));
  }

  .ce-column {

    margin-bottom: floor(@grid-gutter-width/2);
    .clearfix();
  }

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

.ce-gallery {
  &[data-ce-columns="5"] {
    .ce-column {
      .make-sm-column(6, floor(@grid-gutter-width/2));
      .make-md-column(4, floor(@grid-gutter-width/2));
      .make-lg-column(2.4, floor(@grid-gutter-width/2));

    }
  }

  &[data-ce-columns="4"] {
    .ce-column {
      .make-sm-column(6, floor(@grid-gutter-width/2));
      .make-md-column(3, floor(@grid-gutter-width/2));

    }
  }

  &[data-ce-columns="3"] {
    .ce-column {
      .make-sm-column(4, floor(@grid-gutter-width/2));

    }
  }

  &[data-ce-columns="2"] {

    .ce-column {
      .make-sm-column(6, floor(@grid-gutter-width/2));

    }
  }

  &[data-ce-columns="1"], &[data-ce-images="1"] {
    //.make-row(0);
    .ce-column {
      .make-xs-column(12, floor(@grid-gutter-width/2));
    }
  }

  //.csc-textpic-intext-left-nowrap & {
  //  float: left;
  //}

  .lightbox {
    display: block;
    position: relative;

    &:before {
      position: absolute;
      left: floor(@grid-gutter-width/4);
      bottom: floor(@grid-gutter-width/4);

      font-family: "icon";
      font-size: 23px;
      font-variant: normal;
      text-transform: none;
      line-height: 1em;
      font-style: normal;
      font-weight: normal;

      content: '\e808';
      color: rgba(255, 255, 255, .5);
      .transition(color .25s ease);
    }
    &:hover:before {
      color: rgba(255, 255, 255, .9);
    }
  }

}

.ce-image {
  &-intext-left img {
    float: left;
    margin-right: @padding-base-horizontal;
  }
  &-intext-right img {
    float: right;
    margin-left: @padding-base-horizontal;
  }
}

.frame-slider {
  .section > & {
    .container();
  }

  .ce-image {
    .ce-row {
      margin-left: 0;
      margin-right: 0;
    }
    .ce-column {
      margin-bottom: 0;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }

}

.frame-bgimage {
  height: 100%;
  .ce-row {
    margin: 0;
    .ce-column {
      padding: 0;
    }
  }

  * {
    height: 100%;
    width: 100vw;
  }

  z-index: 1;
  .ce-image {
    position: absolute;
    overflow: hidden;
    padding: 0;
    top: 0;
    left: 0;

    z-index: 1;
    img {
      width: inherit;
      height: inherit;

      min-width: inherit;
      min-height: inherit;
      max-width: inherit;
      max-height: inherit;

      object-fit: cover;
      object-position: center bottom;
    }
  }

}
