.sfc-carousel {
  width: 100%;
}

.sfc-carousel .sfc-viewport {
  position: relative;
  width: 100%;
  height: 400px; /* or use aspect-ratio */
  overflow: hidden;
}

/* Each slide is absolutely positioned and faded via opacity */
.sfc-carousel .sfc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 650ms ease;
  display: block;
}

/* Make the first slide visible immediately (JS will manage after) */
.sfc-carousel .sfc-slide.is-active {
  opacity: 1;
}

/* Images should cover the viewport nicely */
.sfc-carousel .sfc-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.sfc-carousel.sfc-carousel--empty {
  border: 1px dashed #ccc;
  padding: 12px;
  color: #666;
}