.carousel-container {
  position: relative;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
  border-radius: 12px;

  /* Force 16:9 ratio */
  aspect-ratio: 16 / 9;
  background: #000; /* fallback background for images */
}

.carousel {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.carousel img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain; /* show whole image without zooming */
  background: #000; /* fill gaps if aspect ratio differs */
}