Making the site-title image (logo) responsive (media queries or scripting?)

Hi there,
I’ve got a pages-based site built on a Quark child theme. I have structured the media queries so the header image is a background image and changes to a smaller one at certain breakpoints. The nav also changes accordingly.

My question now is how to do the same with the logo. I am using an image instead of a text tagline, and I do have it at different sizes, but I can’t figure out how to target that image to switch it out, or if that’s possible.

From searching this forum I have found this from the theme creator very helpful:

2. The theme is responsive, straight out of the box. If you view the demo theme (linked above), you’ll see it change sizes on different devices. If you add a fixed height to something however, such as making the banner a fixed height of 420px for example, then that will stop it shrinking/enlarging as the browser width changes.

3. The media queries I’ve added are based on the default design. So, instead of using fixed sizes, such as 768px for example, I’ve added media queries where the design “breaks”. If you change the design significantly then you may have to adjust these media queries accordingly.

Here is my site: https://djxstation.com/wp/

Is this something I can/should change with media queries or do I need to use scripting? If scripting, should I use an alternate template part and change the get_header() function to call a different header file based on the media query? Or is that overkill and convoluted? Any ideas would be greatly appreciated! Thank you!