/// Image with caption styles
///
/// @example scss - Usage
///
///   @include k-ImageWithCaption;

@mixin k-ImageWithCaption {
  $paddingTop: k-px-to-rem(25px);
  $paddingSide: k-px-to-rem(30px);

  $captionBackgroundColor: map-get($k-colors, 'background-1');

  .k-ImageWithCaption {
    position: relative;
    margin: 0;
  }

  .k-ImageWithCaption__caption {
    position: absolute;
    bottom: 0;
    right: 0;

    padding: $paddingTop $paddingSide 0;
    max-width: 65%;
    background-color: $captionBackgroundColor;
  }

  .k-ImageWithCaption__img {
    display: block;
    width: 100%;
  }
}