Setting Up a Multi-Layer Box Grid

I am trying to set up a multi-layer box module grid that is responsive to screen size. I’ve watched te BeaverBuilder video, but I am struggling to get it to work properly because I think it is causing an overflow that I’m unsure how to fix. So far, I have it set up (possibly in a convoluted way) where it is a box flex row first, then a box grid with 4 columns and 2 rows. After this, I’ve added another box grid for the sizing of the box and then a box flex column to add in a photo, a heading, and a button group (not all columns will have this going forward). I will attach a screenshot, but this repeats for each row.

I’m going to attach a screenshot of how I’ve sized the box for the column item itself. I haven’t added sizes for each of the screen sized areas: (Large, medium, small), only the Extra Large desktop view. Is this part of the issue or am I doing too much overall for this layout?

The webpage is at: Secondary Education - ACPS Website

Any suggestions would be appreciated!