CSS problem with Bootstrap Carousel - Images not showing on iphone safari browser

Images not showing on safari browser. Please check website for reference of problem: [login to view URL] Using the following bootstrap code: <!-- ============================= BANNER PAGE ============================== --> <!--Carousel Wrapper--> <div id="carousel-example-2" class="carousel slide carousel-fade position-brand" data-ride="carousel"> <!--Indicators--> <ol class="carousel-indicators mb-5 pb-3"> <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-2" data-slide-to="1"></li> <li data-target="#carousel-example-2" data-slide-to="2"></li> </ol> <!--/.Indicators--> <!--Slides--> <div class="carousel-inner"> <div class="carousel-item active"> <div class="home-brand-size dark-overlay-2"> <img class="img-fluid dark-overlay-2" src="/carousel/[login to view URL]" alt="First slide"> </div> <div class="carousel-caption mb-5"> <h3 class="h3-responsive">Halo Infinite</h3> <p>Sometime in 2020</p> </div> </div> <div class="carousel-item"> <!--Mask color--> <div class="home-brand-size dark-overlay-2"> <img class="img-fluid dark-overlay-2" src="/carousel/[login to view URL]" alt="Second slide"> </div> <div class="carousel-caption mb-5"> <h3 class="h3-responsive">Cyberpunk 2077</h3> <p>25 April, 2020</p> </div> </div> <div class="carousel-item"> <!--Mask color--> <div class="home-brand-size dark-overlay-2"> <img class="img-fluid dark-overlay-2" src="/carousel/[login to view URL]" alt="Third slide"> </div> <div class="carousel-caption mb-5"> <h3 class="h3-responsive">Biomutant</h3> <p>TBA</p> </div> </div> </div> <!--/.Slides--> </div>