Help for a complex rollover that swaps out paragraphs (in the exact same spot) when you click on another element

Thanks, Hello. I have a question regarding an animation I am trying to build. It shouldnt be this difficult. My intended animation is on the front page (link enclosed). I have a pink graphic resembling a heart/mind and it is divided into quadrants using a grid for layout. What I want to achieve is this…when you rollover each quadrants and click on it, I would like to display the text paragraph that talks about that particular quadrant. That paragraph will be located directly below the pink heart/mind graphic. A placeholder paragraph is there. So when you click on another quadrant that paragraph is replaced by content that is specific to information relating to that quadrant. How do I achieve this? This is so simple in other apps, even the dinosaur Dreamweaver. I cant figure it out on Webflow. Please help.

This is my link: https://preview.webflow.com/preview/humanatwork?utm_medium=preview_link&utm_source=designer&utm_content=humanatwork&preview=1f2bdb2edf155a918f34c21146730978&mode=preview


Here is my public share link: LINK
(how to access public share link)