/* -------------------------------------------------------------------- *
 * Compiled 1x sprite has all images horizontally centered
 * Compiled 2x sprite has all images aligned to the right
 */
.vertical {
  background-image: url('../../img/test-position.png?17551386780922');
  background-repeat: no-repeat;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .vertical {
    /* Retina sprite */
    background-image: url('../../img/test-position@2x.png?17551386780922');
    background-size: 281px auto;
  }
}

/* -------------------------------------------------------------------- *
 * Compiled 1x sprite has all images vertically centered
 * Compiled 2x sprite has all images aligned to the bottom
 */
.horizontal {
  background-image: url('../../img/test-position-alt.png?17551386780922');
  background-repeat: no-repeat;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .horizontal {
    /* Retina sprite */
    background-image: url('../../img/test-position-alt@2x.png?17551386780922');
    background-size: 421px auto;
  }
}

/* -------------------------------------------------------------------- *
 * Regular image has background centered
 * Retina image has background aligned to the right
 */
.vertical {
  background-position: 50% -200px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .vertical {
    /* Retina sprite */
    background-position: 100% -200px;
  }
}

/* -------------------------------------------------------------------- *
 * Regular image has background centered
 * Retina image has background aligned to the right
 */
.horizontal {
  background-position: -281px 50%;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .horizontal {
    /* Retina sprite */
    background-position: -281px 100%;
  }
}