<div class="carousel slide" id="carouselExampleCaptions">
 <div class="carousel-indicators">
   <button class="active" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button>
   <!-- <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button> -->
   <!-- <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button> -->
   <!-- <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button> -->
 </div>

 <div class="carousel-inner">

   <!-- SLIDE 1 -->
   <div class="carousel-item active">
     <img class="d-block w-100" src="/sites/default/files/2025-06/crop_studentcenter.png" alt="Slide 1" width="2048" height="671">
     <div class="bshadow-0 rounded-3 bg-pat-diagonal-1 carousel-caption d-none d-md-block bg-blur-10 glass-panel p-2 h-title-white">
       <h1 class="font-slab text-shadow-1">Student Center</h1>
       <div class="bigger-text-2">
         <p class="text-white text-shadow-1"><strong>Some representative placeholder content for the first slide.</strong></p>
       </div>
     </div>
   </div>

   <!-- SLIDE 2 (uncomment to use)
   <div class="carousel-item">
     <img class="d-block w-100" src="/sites/default/files/2025-06/crop_studentcenter.png" alt="Slide 2" width="2048" height="671">
     <div class="carousel-caption d-none d-md-block">
       <h5>Second slide label</h5>
       <p>Some representative placeholder content for the second slide.</p>
     </div>
   </div>
   -->

   <!-- SLIDE 3 (uncomment to use)
   <div class="carousel-item">
     <img class="d-block w-100" src="/sites/default/files/2025-06/crop_studentcenter.png" alt="Slide 3" width="2048" height="671">
     <div class="carousel-caption d-none d-md-block">
       <h5>Third slide label</h5>
       <p>Some representative placeholder content for the third slide.</p>
     </div>
   </div>
   -->

   <!-- SLIDE 4 (uncomment to use)
   <div class="carousel-item">
     <img class="d-block w-100" src="/sites/default/files/2025-06/crop_studentcenter.png" alt="Slide 4" width="2048" height="671">
     <div class="carousel-caption d-none d-md-block">
       <h5>Fourth slide label</h5>
       <p>Some representative placeholder content for the fourth slide.</p>
     </div>
   </div>
   -->

 </div>

 <!-- CONTROLS -->
 <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="visually-hidden">Previous</span>
 </button>
 <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="visually-hidden">Next</span>
 </button>
</div>

use .bg-caption on the same element as .carousel-caption to adjust bottom to have a background on the caption. moves it about indicators.

Good image size is 1800 x 600