Gravity Forms Styling -- 2

Hi! I love working with gravity forms and also have a pro license, so everything on Gravity Forms is working right. When I originally created this form, I used GF Image Choices plugin to replace the checkboxes with images. The form is for a dental image, so I had the boxes arranged very specifically to represent teeth in the mouth (this is the way their prescription forms are setup) Very recently, the image plugin that I was using began messing up and I want to uninstall it and code these image boxes so they're perfect. It always worked well on desktop, but on mobile devices, it would collapse columns and make 3 or 4 rows of teeth. I want to spend some time and lay this out perfectly. I have already created SVG images 1,2,3,4,5.... so I'd like users to be able to select the boxes and a border will show around selected images. Currently, the image plugin is having an error in editing, not actually displaying- so things look good, but just cannot edit. Even if plugin is fixed, the column/responsive issue will still persist. So, I am advising to abandon the image plugin and code this the way we want it. I'm attaching a view of the edit screen in Gravity. With the image plugged turned on and off- you can see the boxes arranged - thats supposed to be the left and right side of the mouth- top and bottom rows. Dr's understand it when it's in a grid- I would like a fine grey stroked grid/border around everything with a small gap in between the left and right sections. The boxes should be filled pref with the number text- I have the svg images, but would be better if we could render text- if not, the number images will be fine. When user's select the boxes, the box will turn blue with white numbers There are 2 other instances of this section, and then there is a variant- same layout, but the numbers are done differently. I'm also attaching the original pdf form layout. When columns collapse, these sections should stay intact.