Composed media queries should use an 'and' between the existing media query and the 2x queries

For:

```css
@media only screen and (min-width: 48em) {
   /** at-2x image here that's specific for larger screens. */
}
```

...we currently get something like:


```css
@media only screen and (min-width: 48em), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
  ...
}
```

...which messes up the image for smaller retina screens.

The output we want is actually:

```css
@media only screen and (min-width: 48em) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 48em) and (min-resolution: 144dpi), only screen and (min-width: 48em) and (min-resolution: 1.5dppx) {
  ...
}
```

...or better visualized as:

```css
@media
  only screen and (min-width: 48em) and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min-width: 48em) and (min-resolution: 144dpi),
  only screen and (min-width: 48em) and (min-resolution: 1.5dppx) {
    ...
}
```

(Commas are like `OR` and `and` is like `AND`, which is what we want here.)