Excessive Gap beneath Image Carousal (post v5-v7 upgrade)

My main site still has Version 5.13.2

I created 2 test sites with a mirror of my main site and upgraded to Version 7.1.6

Now there is an excessive whitespace gap beneath all of my image carousels throughout my website.

The problem is:

<div class="flickity-viewport" style="height: 823.115px; touch-action: pan-y;"><div class="flickity-slider" style="left: 0px; transform: translateX(0%);">

(Flickity isn’t present in the old version (‘main site’) that is still working, and adjusting the flickity-viewport height in the ‘browser > inspect’ fixes it (temporarily for me only) in the new test sites (with the updated version), but I don’t know what to put where to override this style permanently, or know if it’s a “flickity” or “shortcodes ultimate” bug)

To replicate:

Shortcodes Ultimate > Image carousel
Images Source > Media Library > 1 or more images
Link to Lightbox

(In case it’s somehow relevant, the other settings I generally use but it varies across the site: Style = Photo, Controls = Dark, Crop = Do not crop, Columns = 1 or 2, Adaptive = Yes, Spacing = Yes, Alignment = Center, Max Width = none, Captions = no, Arrows = Yes, Dots = Yes, Link to = Lightbox, Links Target = New, Autoplay = 0, Speed = Fast, Images Size = Original, Outline = Yes, Random order = No)

All images on my main site (5.13.2) are fine, but all images on my 2 test sites (7.1.6) have this extra extra excessive whitespace beneath every image carousel (and I’ve used this everywhere throughout my site to make use of the lightbox feature).

Does someone have a solution? Perhaps a css-override to that height? (note: I don’t know how). It seems many people may not of used this for single images like I have, and therefore it hasn’t been picked up until now?