"Overlay" section, between section, with dynamic content

I'm trying to recreate this effect (the overlay section that is in between two sections, with the form in it), without calculating the height with JS and positioning it with absolute. Initially, I thought that I could use something like margin-block-start: -50% to move it up 50 % of its height, and therefore make the content below "follow along", but it moves up waaay more than that. You guys have any other approaches I should look into? I'm running out of ideas.
image.png
Was this page helpful?