responsive 6 column layout

QUESTION ONE. I had a container > grid (6-columns) > with 6 containers, 1 container in each grid column. At one point I selected my grid and clicked on "change block type or style" and selected columns. Explain please what happened and how I can undo that action? I see now my grid is nested inside several columns and I don't know what the difference is.

QUESTION TWO. What is my best strategy for creating a row/container using just generateblocks that is responsive and looks like the grey section here: https://seashorewebservices.com/services/. This section contains 3-columns/2-rows when viewed on desktop screens; tablet view is the same as desktop view; mobile view is a single column.

QUESTION THREE. How can I put a divider line between the headline blocks in each row (as seen here: https://seashorewebservices.com/services/)? I tried using the gutenber divider but cannot style it the way I want without targeting it with CSS. Perhaps that's the best way these days?

QUESTION FOUR. Can you point me to any articles or tutorials that teach advanced layout designs?

Thanks!