Responsive issue - large white gaps between the hype divs and the rest of the other blocks

Hello everyone!
I am working on a client landing page for customer education. The landing page is built on WordPress and contains two hype animations imported with the Tumult Hype WordPress Plugin.

While I followed the instructions to wrap each scene in flexible divs and specified the min-height on the WordPress custom code section, I noticed that while the div min height is working, the actual animation is not expanding, creating huge gaps between the other blocks in the page.

You can view the live review site here: https://wattsmarthomes.com/heat-pump-comfort/. Any help you can provide would be so helpful! We considered many other tools before landing on Tumult Hype, and by far, this is the only html5 tool out there that met all of our project needs.

File attached. I couldn't upload the second interactive due to size, but the setup is the same (groups with flexible layouts).
interactive02_responsive.zip (1.2 MB)

This solution by @h_classen should help resolve this (place the code in the 'head' of your Wordpress page or above your Wordpress shortcode as a code block:

Hello, and thanks for getting back to me. I do not have access to the head of the WordPress site, only the custom CSS area. I am also unable to add a code block - please bear in mind this is a client website... Is there a way to implement the code from Hype? Perhaps by adding to the head HTML document for the animation?

If you select the block type 'code' then you can paste that in and it should have the same effect as though you were adding it to the 'head'. It just needs to be loaded prior to the Hype document in the DOM order.