Hi there! New to Webflow (and love it, but obviously filled with many questions). Hoping to get some feedback.
The goal of this hero section is that each square acts as a button. (I have the transform fairly understood for the hover animation—but open to feedback.)
How would I do the following?
(1) keeping the grid (and it’s contents) even like in the upper image. (would that be setting each at a particular value; or just use the FRs)
(2) creating the lines between each of the grid cells
(3) adding the textual elements to fill and adopt the size of grid cell while staying even with the rest of the layout
(4) anything that would make sense in approaching this based on the image placed at the top of the read-only file
Within the read-only link I have placed the image of what the upper portion of the website: of what it is intended to look like; under that is an example of the animation hover, but the trouble is underneath.
Let me know your thoughts! 
Here is my site Read-Only: https://preview.webflow.com/preview/scenario-boxes?utm_medium=preview_link&utm_source=designer&utm_content=scenario-boxes&preview=eea8703b1e1b2a1a819340117defb3a8&mode=preview
([how to share your site Read-Only link][2])