.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 100%; 
}

.carousel-inner .item {
  position: relative;
  display: none;
  transition: .6s ease-in-out left, .6s ease-in-out opacity; 
  opacity: 0; 
}

.carousel-inner .item.active {
  display: block;
  opacity: 1; 
}

.carousel-inner .item img {
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  transform: translate3d(0, 0, 0);
}

.carousel-control {
  z-index: 2;
}

html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
  height: 100%;
}