You can see it here: https://storefront.community/?search=Wunder+Trains

Safari pushes the image up but chrome centers it. Spent a ton of time on this - a second pair of eyes would really help!

Sharing code subset because it's quite large:

<div key={product.reddit_post_id + "-" + product.listing_number} className="card-compact w-96 bg-base-100 shadow-xl rounded-box h-full">

  <div className="carousel w-full h-auto md:h-96">
    {product.images.length == 0 && onImageError(product.brands.join(" ").toLowerCase())}
    {product.images.map((image, index) =>
      <div id={`slide${index}`} key={image} className="carousel-item relative w-full">
        <Image
          loader={imageKitLoader}
          src={image}
          onError={onImageError} 
          className="w-full rounded-box object-contain"
          width={480}
          height={480} 
          alt="Item Picture"
        />
        <div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
          {index > 0 && <a className="md:hidden btn btn-circle btn-xs opacity-50 pointer-events-none">❮</a> }
          {index == 0 && <a className="md:hidden btn btn-circle opacity-0 pointer-events-none">❮</a> }
          {index < product.images.length -1 && <a className="md:hidden btn btn-circle btn-xs opacity-50 pointer-events-none">❯</a> }
          {index >= product.images.length - 1 && <a className="md:hidden btn btn-circle opacity-0 pointer-events-none">❯</a> }
        </div>
      </div>
    )}
  </div>

  <div className="card-body md:min-h-48">
    random_text
  </div>
</div>