on your media query @media screen and (max-width: 580px)
display: block !important;
width: 100% !important;
Right now your mobile-image has a declared width of 600 pixels so it's not responsive.
Coming from the world of retail, we generate a lot of emails each week with a small staff and don't have the time to code out every email. We rely on a hybrid approach. Although the majority of the email will be image based, we do use snippets whenever possible, especially for buttons.
One benefit of using image based text is that if say a price needs changed after the email has been sent, I can update the graphic. People who haven't opened the email yet will see the correct image. You can't fix the alt text but at least the image will be correct.
I'm not sure about your code but there could be a few issues. I'd look into the support for the pseudo selector
You might also want to check out this article on ghosting tables for outlook. https://www.emailonacid.com/blog/article/email-development/using-ghost-columns-to-fix-alignment-problems-in-outlook/
Hope this helps