Logo resizing

I successfully changed the code to allow my wider logo, but when the screen shrinks the logo gets distorted. Where can I edit the code to change the width of the logo responsively so it doesn’t distort?
Site is:


Hello there,

I hope you are doing well today.

You can use the following CSS code to change the size of the logo and ensure it would be responsive by going to Appearance > Customize > Additional CSS and pasting it there.

/*Resize logo*/
.site-header .custom-logo-link img {
    width: 407px;
    height: auto;

Best Regards,