HTML email horizontal line/gap/border between sliced images on Gmail App Dark (Android 11.0)

I'm making an HTML email newsletter. There is this one image that spliced in two so I could put different link on both parts of the image.

The issue is that I have this tiny 1px gap between images visible on Gmail App Dark (Android 11.0). Those two images should look like one seamless image without any vertical spacing between them.

HTML:

   <tr>
      <td align="center" style="padding-top: 20px; background-color: #f9f7f4;line-height: 0;padding-bottom: 0;margin: 0;">
        <a href="#" target="_blank" style="text-decoration:none;margin: 0;line-height: 0;">
          <img align="center" src="upper.png" alt="Placeholder" width="507" height="189" style="display: block;border-collapse: collapse;margin: 0;padding: 0;" border="0">
        </a>
      </td>
    </tr>
    <tr>
      <td align="center" style="padding-bottom: 50px; background-color: #f9f7f4;line-height: 0;margin: 0;padding-top: 0;">
        <a href="#" target="_blank" style="text-decoration:none;margin: 0;line-height: 0;"> 
          <img align="center" src="lower.png" alt="Placeholder" width="507" height="93" style="display: block;border-collapse: collapse;margin: 0;padding: 0;" border="0">
        </a>
      </td>
    </tr>

After browsing through dozens of similar questions and spending hours on this I still wasn't able to solve this issue. Here are some of the things I've tried:

• removing margins, paddings, linebreaks
• wrapping <a> tags with <p style="margin:0">
• replacing png with jpg images
• replacing images all together
• setting width="100%" and height="auto" while setting max-width and max-height in style
• removing <a> tags
• wrapping <a> tags in <div style="line-height: 0; font-size:0">
• etc...

What can I try next?