Kasi are you using Salesforce Marketing Cloud? Their carousel content block does not work in all email browsers (including gmail and outlook - you will only see the first image), but it does work in outlook for mac and apple mail.
You have to make sure that the Automatic Image Scrolling checkbox is checked. When you're entering the images into the block, that section is at the end, above the dimension settings.
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