JS + CSS Flipcards Breaking Swiper

[foges99]

I am currently trying to implement a simple card flip animation to a SwiperJS carousel for a personal website.

For some reason, every card but the last one in the carousel I got to work with only minor formatting issues.

Attempting to apply the card flip css to the last card in the carousel makes the entire swiper disappear into the overflow.

Demonstrated in JSFiddle

JSFiddle

changing the div class "cardInnerNA" to "cardInner4" which links it to the corresponding css will demonstrate how the entire thing breaks

I tried messing around with the position aspects and adding z-index, but nothing gave me a clean fix without causing a multitude of other formatting issues.

I am completely new to web design so feel free to point out any mistakes or at least give me advice on how I could go about tracing back and correcting this issue.

Also, I looked and couldn't find if there was already a swiper feature for this, but it would be a great addition. I think it makes for a pretty clean looking presentation.

Thanks.