Images inside of a carousel stretching on Safari for iOS

Question

I'm having an issue where I have a carousel with images, but on Safari for iOS (and I'm guessing for MacOS too) when you scroll to the right, the images containers' width get larger for some reason. This doesn't happen on other browsers.

This is how it starts and this is how it looks when you scroll all the way to the right.

This is the CSS rules for the section:

.carousel-container {
  display: block;
  overflow: auto;
  scroll-snap-type: x mandatory;
}

.carousel {
  display: flex !important;
  width: max-content !important;
  align-items: center;
}

.card-container {
  width: 20%!important; 
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.card-image-container {
  position: relative;
  height: 100%;
}

.card-image {
  min-height: 35.5vw;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

@media screen and (max-width: 750px) {
 .card-image {
   height: 60vw;
 }
}

I know safari has issues with flex and grid sometimes, I tried other solutions I've found on here but so far nothing works.