fix(mjml-hero): fixed-height hero no longer overlaps subsequent content in Outlook 365 120 DPI)

[robin-ray]

Fixes #2657

Reproduction

Generate an email from the following MJML, send it using putsmail.com, and then open it in Outlook 365 on Windows 10 at 120 DPI.

<mjml>
  <mj-body>
    <mj-hero height="256px" mode="fixed-height" background-color="#000000" background-url="https://picsum.photos/1200/512" background-width="600px" background-height="256px" vertical-align="middle">
      <mj-text color="#ffffff">
        <h2>Call to action!</h2>
        <p>Try clicking the button below.</p>
      </mj-text>
      <mj-button color="#000000" background-color="#ffffff" align="left">Example Button</mj-button>
    </mj-hero>
    <mj-section>
      <mj-column>
        <mj-text align="center">
          <p><a href="https://www.example.com" rel="noopener">Footer</a></p>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Before Fix
The hero image overlaps the footer link.

After Fix
The footer link is correctly spaced below the hero image.

Thank you!

[robin-ray]

I have validated this fix in the following environments:

• Apple Mail 13 (macOS 10.15)
• Outlook 2016 (macOS 10.12.6)
• Outlook 2016 (Win 10)
• OL Office 365 (Win 10)
• Outlook 2019 (Win 10)
• OL Office 365 120 DPI (Win 10)
• OL Office 365 (macOS 12.6.1)
• Gmail App (Android 6.0)
• Gmail App (Android 7.1)
• Gmail App (Android 8.0)
• Gmail App (Android 9.0)
• Gmail App (Android 10.0)
• Gmail App (iOS 14.2)
• iPhone SE Gen 2 (iOS 13.4)
• iPhone 11 Pro (iOS 13.1)
• iPhone 11 Pro Max (iOS 13.1)
• iPhone 12 (iOS 14.2)
• iPhone 12 mini (iOS 14.2)
• iPhone 12 Pro Max (iOS 14.2)
• iPad Retina (iOS 13.1)
• AOL Mail (Edge)
• freenet.de (Edge)
• Gmail (Chrome)
• Outlook.com (Chrome)
• Yahoo! Mail (Firefox)