.responsive-image() {
  height: auto;
  max-width: 100%;
}

.image-fullwidth {
  width: 100%;
  height: auto;
  display: block;
}

.image-block {
  * {
    display: block !important;// !important to overwrite styles from CKEditor inside ecms
  }

  img {
    .image-fullwidth;
  }
}

.img-object(@type: cover, @size: 20vh) {
  display: block;
  height: @size;
  position: relative;
  overflow: hidden;

  img {
    display: block;
    object-fit: @type;
    object-position: 50% 50%;
    height: 100%;
    width: 100%;
  }
}

.image-contain {
  .img-object(contain, 26vh);
}

.image-overlay {
  position: relative;

  img {
    .image-fullwidth;
  }

  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,.3);
  }
}

.ecms-active {
  .image-overlay {
    &::after {
      display: none;
    }
  }
}

.image-grayscale {
  .image-fullwidth;
  -webkit-filter: grayscale(100%);
  -moz-filter:    grayscale(100%);
  -ms-filter:     grayscale(100%);
  -o-filter:      grayscale(100%);
}

.bg-image-cover {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}