I have a working solution, which makes all the cards the same size, instead of enlarging. I first tried to enter the styling in to the Style section in the Footer in the Style area which did not work. However works when putting it inline in <style></style> tags in the HTML area in the Footer. It appears it applies it globally. Perhaps this was not intended by the Hub but this is good, and I hope it continues to work in fact, as it is a very useful capability to be able to apply a CSS rule globally. As if it were a regular web page.
I created a class on the Gallery card called StopStretch, in the box where you can add a custom style tag. I then used last-of-type pseudo selectors to get the last two and prevent stretching, by using the same Calc() calculations as the existing bootstrap classes. Complete <style> block is below, as entered inline to the Footer:
<style>
.StopStretch
{
}
.StopStretch .gallery-xl .gallery-card:nth-of-type(4n+1):nth-last-of-type(2) {
width: calc((100% - (3 * 30px))/ 4);
text-align: center;
}
.StopStretch .gallery-xl .gallery-card:nth-of-type(3n+1):last-of-type
{
width: calc((100% - (3 * 30px))/ 4);
text-align: center;
}
.StopStretch .gallery-xl .StopStretch .gallery-card:nth-of-type(4n+2):last-of-type
{
width: calc((100% - (3 * 30px))/ 4);
text-align: center;
}
.StopStretch .gallery-lg .gallery-card:nth-of-type(4n+1):nth-last-of-type(2) {
width: calc((100% - (2 * 30px))/ 3);
text-align: center;
}
.StopStretch .gallery-lg .gallery-card:nth-of-type(3n+1):last-of-type
{
width: calc((100% - (2 * 30px))/ 3);
text-align: center;
}
.StopStretch .gallery-lg .StopStretch .gallery-card:nth-of-type(4n+2):last-of-type
{
width: calc((100% - (2 * 30px))/ 3);
text-align: center;
}
.gallery-lg .gallery-card:nth-of-type(3n+1):last-of-type
{
width: calc((100% - (2 * 30px))/ 3)
}