.carousel-caption {
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(5px);
/* // backdrop-filter not supported by Firefox */
  backdrop-filter: blur(5px);
  font-size: smaller;
}

.carousel-caption p {
  margin: 0 calc(16px + 1.5625vw);
}

.carousel-caption p,
.carousel-indicators {
  display: none !important;
}

.carousel-caption {
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
/* // backdrop-filter not supported by Firefox */
  backdrop-filter: none;
  border: none;
  font-size: 1rem;
  position: absolute;
  bottom: 0;
}

/* assets/includes/00-splash-page.php and 04-supplies.php */
/* transition duration to control the speed of fade effect */
/* https://getbootstrap.com/docs/5.3/components/carousel/#custom-transition
  The transition duration of .carousel-item can be changed
  with the $carousel-transition-duration Sass variable before compiling
  or custom styles if you’re using the compiled CSS.
  If multiple transitions are applied, make sure the transform transition is defined first
  (e.g. transition: transform 2s ease, opacity .5s ease-out). */
.carousel-item {
  transition: transform 2s ease;
  }

  .carousel-fade .active.carousel-item-start,
  .carousel-fade .active.carousel-item-end {
  transition: opacity 0.5s ease-out;
  }

  /* Hide controls */
  .carousel-control-next, .carousel-control-prev {
      display: none;
  }