/* Unter 768px: feste Höhe, Bild zugeschnitten statt nur skaliert */
@media (max-width: 767.98px) {

  /* Basis-Layout für alle Varianten */
  .carousel-fixed-sm-right .carousel-inner,
  .carousel-fixed-sm-right .carousel-item,
  .carousel-fixed-sm-left .carousel-inner,
  .carousel-fixed-sm-left .carousel-item,
  .carousel-fixed-sm-center .carousel-inner,
  .carousel-fixed-sm-center .carousel-item {
    height: 400px;
    overflow: hidden;
  }

  .carousel-fixed-sm-right .carousel-item,
  .carousel-fixed-sm-left .carousel-item,
  .carousel-fixed-sm-center .carousel-item {
    position: relative;
  }

  .carousel-fixed-sm-right .carousel-item img,
  .carousel-fixed-sm-left .carousel-item img,
  .carousel-fixed-sm-center .carousel-item img {
    position: absolute;
    top: 0;

    height: 100% !important;      /* füllt die 400px Höhe */
    width: auto !important;       /* w-100 von Bootstrap aushebeln */
    max-width: none !important;
    display: block;
  }

  /* Variante: rechter Bereich fix sichtbar, links abgeschnitten */
  .carousel-fixed-sm-right .carousel-item img {
    right: 0;
    left: auto;
    transform: none;
  }

  /* Variante: linker Bereich fix sichtbar, rechts abgeschnitten */
  .carousel-fixed-sm-left .carousel-item img {
    left: 0;
    right: auto;
    transform: none;
  }

  /* Variante: Bild zentriert, links & rechts werden gleich abgeschnitten */
  .carousel-fixed-sm-center .carousel-item img {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}