responsive retina images

@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {

    background-image: image-url($image);
    background-size: $width $height;
  }
}

.logo {
  background: image-url("crisalix_logo.png") no-repeat 0 center;
  @include image-2x("crisalix_logo@2x.png", 160px, 50px);
}

@media only screen and (max-width: 767px) {
  .logo {
    background-image: image-url("crisalix_logo-s.png");
    @include image-2x("crisalix_logo-s@2x.png", 140px, 44px);
  }
}