// default
@include viewport--l {
  .media-block {
    align-items: center;
    display: flex;
    margin-left: auto;
    position: relative;
    width: grid-columns(7, 12);

    img {
      bottom: 0;
      flex-shrink: 0; // fix image stretch in IE
      margin: auto;
      max-height: 100%;
      max-width: none;
      position: absolute;
    }
  }
}

// scalable
.media-block-scalable {
  position: relative;

  @include viewport--l {
    width: grid-columns(7, 12);
  }

  img {
    height: 100%;
  }
}

// boxed
.media-block--boxed {
  overflow: hidden;
  position: relative;

  img {
    border-radius: $border-radius;

    @include viewport--l {
      border-radius: $border-radius--l;
      height: 100%; //new
      object-fit: cover; //new
      position: static;
      width: 100%; //new
    }
  }
}

// boxed large
.media-block.media-block--boxed-large {
  overflow: hidden;

  // viewport s - m
  @include viewport--l('inversed') {
    @include media-align('right');
    border-radius: $border-radius;
    height: $baseline * 20;
    margin: 0;
    position: relative;

    img {
      max-height: 120%;
    }
  }

  // viewport l
  @include viewport--l {
    @include media-align;
    border-radius: $border-radius--l;
    bottom: 0;
    left: $grid-margin--l;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: calc(100% - (2 * #{$grid-margin--l}));
  }
}

// contain
@include viewport--l {
  .media-block--contain {
    align-items: center;
    display: flex;

    img {
      max-width: 100%;
      position: static;
    }
  }
}

// full / half width
@include viewport--l {
  .media-block {
    // half/full width image
    &--half-width,
    &--full-width {
      bottom: 0;
      margin: 0;
      overflow: hidden;
      position: absolute;
      top: -1px; // small correction to fix browser rounding issues
      img {
        min-width: 100%;
      }
    }
    // half width
    &--half-width {
      width: 50%;
    }
    // full width
    &--full-width {
      @include media-align;
      left: 0;
      width: 100%;
    }
  }
}

// center
.media-block--center {
  // center align image horizontally & vertically
  @include media-align;
}

// right
.media-block--right {
  // center align image vertically & horizontally to the right
  @include media-align('right');
}

.media-block--left {
  //center align image vertically & horizontally to the left
  @include media-align('left');
}