Why cant I change the background color of Bootstrap 5 Carousel?

Question

I have a Boostrap 5 image Carousel that sits inside a Bootstrap 5 Modal and when I decrease the size of the images inside the carousel to below 100% I get this white background. The background seems to come from the "modal-content" element and when I try to change it to something like "background: rgba(0, 0, 0, 0.83) !important;", it just changed it to this weird grey color (where the carousel buttons are) as if some other element is still influencing the color yet I can't find what it is...

Note in the image that the result that I'm trying to achieve is that the whole background around the Image will be "background: rgba(0, 0, 0, 0.83) !important;" just like I’ve managed to apply on the "modal" element. Also, there's this thin blue border around the "modal-content" element which i can't get rid of.

HTML (Pug template)

#assetModal.modal.fade.asset-gallery-modal.text-center(tabindex='-1' aria-labelledby='assetModalLabel' aria-hidden='true')
    .modal-dialog.modal-dialog-centered.modal-xl
        .modal-content.asset-gallery-modal-content
            #assetCarousel.carousel.slide.carousel-fade
                .carousel-inner.asset-modal-carousel-inner
                button.carousel-control-prev(type='button' data-bs-target='#assetCarousel' data-bs-slide='prev')
                    span.carousel-control-prev-icon.asset-gallery-carousel-prev-icon(aria-hidden='true')
                    span.visually-hidden Previous
                button.carousel-control-next(type='button' data-bs-target='#assetCarousel' data-bs-slide='next')
                    span.carousel-control-next-icon.asset-gallery-carousel-next-icon(aria-hidden='true')
                    span.visually-hidden Next

SCSS

.asset-gallery-modal {
  background: rgba(0, 0, 0, 0.83) !important;
}

.asset-gallery-modal-content {
  // Suppose to apply background similar to the one in .modal but doesn't work
  background: rgba(0, 0, 0, 0.83) !important;
  border: none !important;
}

.asset-gallery-carousel-item img {
  width: 70%;
}

.asset-gallery-carousel-prev-icon {
  width: 5rem !important;
  height: 5rem !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.asset-gallery-carousel-next-icon {
  width: 5rem !important;
  height: 5rem !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

Also, I'm loading an array of images inside "carousel-item" elements dynamically when the user clicks the main gallery image

// Set clicked asset main image as modal main image & feed markup to modal-carousel
if (config.Elements.assetMainImg)
  config.Elements.assetMainImg.addEventListener('click', async (e) => {
    config.Elements.carouselInner.innerHTML = '';
    config.Elements.assetThumbnailImgs.forEach((thumbNail) => {
      if (thumbNail.src === config.Elements.assetMainImg.src) {
        let markup = `<div class="carousel-item asset-gallery-carousel-item active d-block w-100">
                        <img src="${thumbNail.src}" alt="...">
                      </div> `;
        document.querySelector('.carousel-inner').insertAdjacentHTML('afterbegin', markup);
      } else {
        let markup = `<div class="carousel-item asset-gallery-carousel-item d-block w-100">
                        <img src="${thumbNail.src}" alt="...">
                      </div>`;
        document.querySelector('.carousel-inner').insertAdjacentHTML('afterbegin', markup);
      }
    });
  });