Problem with replacing background image on retina?

Question

css

Guys here is the code:
@mobile-width-only: ~"(max-width: 768px)";
@tablet-width: ~"(min-width: 768px)";
@retina: ~"(min-resolution: 144dpi),
(min-resolution: 1.5dppx)";
media @retina and @mobile-width-only {
.preview {
background-image: url("img/[email protected]");
background-size: 575px auto;
}
}
media @retina and @tablet-width {
.preview {
background-image: url("img/[email protected]");
background-size: 1150px auto;
}
}
What works is lower in the code, i.e. if it is below @mobile-width-only, then the picture at any width is [email protected], if @tablet-width, then, respectively, at any width - [email protected] Sizes given by bg-size work in the same way, i.e. what goes below.
I don't understand what's wrong.)

Answer 1

media (max-width: 768px) and (min-resolution: 144dpi),
(max-width: 768px) and (min-resolution: 1.5dppx) {
.preview {
background-image: url("img/[email protected] jpg");
background-size: 575px auto;
}
}
media (min-width: 768px) and (min-resolution: 144dpi),
(min-width: 768px) and (min-resolution: 1.5dppx) {
.preview {
background-image: url("img/[email protected] 2x.jpg");
background-size: 1150px auto;
}
}
that's it, figured it out, that's how it worked))