Hiding images by setting them display: none is usually not a good idea as they might still be downloaded anyway.
This is specifically the case for the logo as it does not have loading=lazy attribute and is in initial viewport.
If the logo should really be removed (for small screens), it would be better (performance-wise) to remove that from the template.
If you want, you can test that by creating a new style, apply that CSS to its extra.less, switch to that style in frontend, open your browser developer tools, disable cache, reload the page - you will see that the logo does still get loaded.