.card {
    overflow: hidden;
    background: #d7d7d700;
    background: #d7d7d700;
    .card-img {
      height: 20rem;
    }
    .card-img-container img {
      object-fit: cover;
      object-position: center;
      max-height: 100%;
      height: 20rem;
    }
    .card-img-overlay {
      color: #fff;
      font-weight: bold;
      
    }
    --bs-card-border-radius: 0;
  }
  
  /* small and extra-small screens */
  @media (max-width: 767px) {
    .carousel-inner .carousel-item > div {
      display: none;
      &:first-child {
        display: block;
      }
      .card-img-container img {
        max-width: 100%;
      }
    }
    .container-fluid{
      min-width: 300px !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    .carousel-inner{
      min-width: 300px !important;
    }
  }
  
  /* medium and up screens */
  @media (min-width: 768px) {
    .carousel-inner {
      .carousel-item-end.active,
      .carousel-item-next {
        transform: translateX(25%);
      }
      .carousel-item-start.active,
      .carousel-item-prev {
        transform: translateX(-25%);
      }
      .carousel-item.active,
      .carousel-item-next,
      .carousel-item-prev {
        display: flex;
      }
      .carousel-item-end,
      .carousel-item-start {
        transform: translateX(0);
      }
    }
    .card-img-container {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      img {
        display: inline-block;
        max-height: 100%;
        margin: 0 -50%;
      }
    }
    .container-fluid{
      min-width: 300px !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    .carousel-inner{
      min-width: 300px !important;
    }
  }