I agree with @AllMediaLab, there are too many devices with too many resolutions these days to write device specific queries. I like the approach outlined in this article: https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/
It is a few years old, but captures the ideas well.
Some other side points. If you look at your CSS rules, everything is the same except your background-image. Instead of bulking up your CSS you should toss out the duplication. I’m not sure what you want to happen above 1024px, but from 376px to 1024px you can have the same rules.
I think it is also worth looking at these two articles. src-set is not supported in IE or Firefox - not sure if there is a polyfill, but @media is very well supported. They would help you trim up your CSS a little and also take device density into account.
Thanks to @AllMediaLab for making me slightly more aware about modern advances in image selection!