Accordion & Image not working mobile + eliminating text wrap on site

Hello. I am having trouble optimizing an accordion and image pairing for mobile. Screenshots attached. The image seems to be enlarging when the accordion information is expanded. Does anyone have CSS code to fix this? Also, I can't seem to eliminate text wrapping across different device sizing. Can anyone help? (additional screenshot attached showing title text wrap in tablet size)

It is happening on other pages of this site as well and i can't figure it out. Thanks in advance!

Site: https://hibiscus-dachshund-wk7b.squarespace.com/config/

Page: Our People

pw: forumhelp1

Easy fix for Leadership, it's best practice to make text boxes as wide as possible for headings without compromising the design so that the box doesn't create a forced break in the text when you get to tablet sized screens. (the 24 column grid gets narrower until it switches to the 8 column grid on mobile, and this causes blocks to become narrower, so when you have a block that is only just big enough on desktop you will see this problem).

The accordion issue is more tricky, but again is related to the nature of the grid system. When you have an accordion next to another block (like an image), the rows expand with the accordion opening which also stretches the blocks on the same rows. As you have an image within a shape, you have the image set to Fill so that's what it does, it fills the now much taller area that the image block occupies.

See how the grid stretches but the image still takes up 7 rows:

As for a solution, there isn't a perfect one when you have that much text it needs to go somewhere. Making the accordion block take up more rows (but vertically center aligned) will minimize the stretching, but not by much. Laying out each one with the image left and name/contact right, and the accordion learn more full width underneath would be the best change I can suggest.

I would also recommend that for the desktop view, you have the accordion block set to vertical align top rather than center, that way the Learn About... always stays at the top when one is expanded.

Fluid Engine is good but needs to be used carefully, I myself am still learning, and working through my "best practices", it's a process, but I'm hoping that it's worth it in the end!