The reason the images disappear at height: auto; is because the images are backgrounds of the card-img portion of the card. There is no actual content in the card-img part of the card and so the auto size is 0.
The problem is that while the card-img height is 'fixed' at 7em, the width is a proportional width of the viewport with different proportions at different set widths. Looks like just shy of 25% on 3.11 at that resolution. This means the aspect ratio of the cards changes as width of the viewport does.
Short of fixing the width of the cards and fixing how many are displayed per row at the various bootstrap breakpoints (which is what Moodle 4.x did), you'd need to change the card image background properties.
I dont have access to 3.11 to try this, but if you try the following
css:
background-size: contain;
background-repeat: no-repeat;
The images will fit to the card size as best they can and not tile.
Alternatively:
background-size: 100%;
background-repeat: no-repeat;
will stretch the images horizontally 100% to fit the width of the card, maintaining the images aspect ratio. This may result in white space above and below the images.
background-size: auto 100%;
background-repeat: no-repeat;
will stretch the image vertically 100% and may leave white space left and right.
Finally:
background-size: 100% 100%;
with stretch the image to fill both horizontal and vertical card size. This will result in stretched images, but it might suit your use case.
