当轮播字幕过长时，它会掉落图像，该如何解决？

如何解决当轮播字幕过长时，它会掉落图像，该如何解决？

这是我的CSS代码和HTML。每当轮播字幕中的一行过长时，它就会从图像上掉下来。但是，当我最小化窗口时，标题最终会移入图像，从而创建我真正想要的效果。想知道如何将其包含在图像中？感谢您的帮助-因为我是CSS / BOOTSTRAP样式的新手。

* {
  margin: 0;
  padding: 0;
}


a {
  background-color: transparent !important;
  color: white;
}

img {
  max-width: 100%;
  max-height: 80vh;
  margin: auto;
}

.carousel-caption {
  padding: 30px;
  background-color:transparent !important;
  position: absolute;

}

.picsum-img-wrapper {
   padding-bottom: 20px;
  padding-top: 20px;
  background-color: #8E9AAF ;
   color: white;
   font-size: 20px;
   font-family: orpheuspro,serif;
   font-style: normal; 
   font-weight: 600 !important; 
   display: grid;
    height: 100%;
}

h3 {
  background-color: transparent !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ngb-carousel [showNavigationArrows]="true" 
[showNavigationIndicators]="true"
interval="12000"
[keyboard]="true"
[pauSEOnHover]="true"
[wrap]="true"
[activeId]="'secondSlide'"
 [interval]="3000" [pauSEOnHover]="pauSEOnHover" (slide)="onSlide($event)">
  <ng-template ngbSlide>
    <div class="picsum-img-wrapper">
      <img src="../../assets/img/actual.png" alt="Angular Carousel 1">
      <div class="carousel-caption">
        <h3>Title Goes Here</h3>
        <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.. To read on click <a routerLink="/blog/1">here</a></p>
      </div>
  </div>
  </ng-template>
  <ng-template ngbSlide>
    <div class="picsum-img-wrapper">
      <img src="../../assets/img/image0.jpeg" alt="Angular Carousel 2">
      <div class="carousel-caption">
        <h3>Title Goes Here</h3>
        <p>Consectetur tortor volutpat pretium... To read on click <a routerLink="/blog/2">here</a></p>
    </div>
  </div>
  </ng-template>
</ngb-carousel>