// Image Mixins
// - Responsive image
// - Retina image
@mixin img-fluid($display: block) {
  display: $display;
  max-width: 100%;
  height: auto;
}

// Retina image
//
// Short retina mixin for setting background-image and -size.

@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
  background-image: url($file-1x);

  @media only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx) {
    // Standardized
    background-image: url($file-2x);
    background-size: $width-1x $height-1x;
  }
}