Usage help - columns and overlaps

I am trying to emulate the general concept for the overlapping “VS” in a circle in the attached mockup using foundry 3, overlap, and columns but having no luck. Is this outside the intended possibilities, and if so, are there any suggestions on how to go about it? The rest of it has been super easy.

Also, if I just try to simplify it with simply a paragraph stack in a middle column for a non-overlapping “vs”, I can’t seem to get the behavior right. I’d want the “VS” column to be small and the others large, with all that being responsive as usual. It works except that when using manual column sizing at smaller breakpoints the “VS” justifies left for no apparent reason and the columns stop aligning well vertically. So to keep things at least behaving reliably, I have to use automatic column sizing, which leaves a giant gap on each side of the “vs”.

Screenshot 2023-08-15 at 1.28.26 PM

Never figured out how to make it work responsively, but I was able to build the large and above breakpoint version where everything is locked down in pixel-defined containers and things stay nice regardless of window size. And then I use a column based version without the overlap for mobile breakpoints

1 Like