Removing images from mobile with CSS

Hi,

I have a landing page to sell some ebooks with one picture at the top (cover) and one at the bottom (testimonial). I wanted to make specific ones for mobile and desktop (4 in total) and then only show the right ones for those devices. This is the CSS I have come up with:

@media (min-width: 1025px) { 
.bundle-cover-m { 
display: none; 
} 
} 
@media (max-width: 768px) { 
.bundle-cover-d { 
display: none; 
} 
} 
@media (min-width: 1025px) { 
.testimonial-m { 
display: none; 
} 
} 
@media (max-width: 768px) { 
.testimonial-d { 
display: none; 
} 
}

The CSS for desktop works and only the desktop images are shown. However, the mobile CSS does nothing although I have tried multiple width settings.

Thanks,
Danielle