Help- I've put a text animation in the hero section, and now my content is jumping at certain breakpoints!

Hi there!

As stated in the topic title, I’ve put a text animation using Typer.js in my hero grid section. It’s pretty much what I want to accomplish looks-wise, however, at certain breakpoints (around 1240px -1500px, for instance) the text will wrap to a third line, causing the content below the hero section to jump around.

I’m really new to web development in general, so I know I’m missing something here. I’m not sure how to approach solving this problem. Is there a way to constrain the hero section grid to a certain size, so that the content below doesn’t jump around? Or is there a way to ensure the section below the hero isn’t affected by the resizing?

Here’s a read only link to the project

and the live site can be viewed at so you can see the jumping, as I dont think it will occur in the preview-mode since its custom code.