fullscreen carousel cell image overlap

Is the only solution to prevent carousel cell images overlapping when browser window width is decreased, to use media queries to change the carousel cell height? Or is there another solution I am not aware of?

Thanks in advance.

**Test case:** https://codepen.io/radleycook/pen/robZQm

Start by reproducing the linked CodePen at reduced browser widths and inspect when the carousel cell images begin to overlap. Compare the behavior with the documented carousel configuration and determine whether the issue can be resolved without changing cell height through media queries. Done means the images remain separated at the affected widths and the reduced test case demonstrates the fix.

Written by the indexing model from the issue text.