Hi Warren,
The spacing problem is two-fold:
1. You are using <br>s to break to a new line after each <a> tag
2. If your want each link to be on one line the surround each with a <p> tag, without the need for line-height or <br> adjustments.
The quotes you are using to surround the links will also work better when in a <p> tag, and you should use the char entity form for the quotes.
As an example, this from the first item in the second box:
"<a href="https://thebibleproject.com/videos/holy-spirit/" target="_blank" title="This is 'The Holy Spirit,' a 4-minute video produced by The Bible Project.">The Holy Spirit</a>"<br>
Should be changed to:
<p>"<a href="https://thebibleproject.com/videos/holy-spirit/" target="_blank" title="This is 'The Holy Spirit,' a 4-minute video produced by The Bible Project.">The Holy Spirit</a>"</p>
Do this for all of the items. Notice that I changed the quote to an entity as well. Each line item is now contained within a <p> tag, which will automatically create the new line and white space. If you fee you need to further adjust the space between the link items then you simply adjust the top or bottom margin on the <p> tag.
Now, to control the resizing we'll want to turn off the defualt "grow" factor in FGM. Add this style rule to your style sheet, the rule will keep the boxes to a strict 23% width-basis:
.p7FGM div.fgm-section {
-webkit-flex-grow: 0;
flex-grow: 0;
}
Lastly, to switch toa two column display for phones add this media query style rule to your style sheet:
@media only screen and (min-width: 0px) and (max-width: 700px) {
.p7FGM .fgm-section {
flex-basis: 46% !important;
font-size: 0.82em !important;
}
}
I also included the font-size adjustment your had in the original.
That should get your pretty close to the original version, but with more control.