Bootstrap3 Carouselのキャプションエリアの下の余白をレスポンシブにしたい

前提・実現したいこと

Bootstrap3 Carouselのキャプションエリアの下の余白をレスポンシブにしたいです

carousel-captionをposition:absoluteとしているため高さが取得出来ずに余白がレスポンシブになりません。

メディアクエリーで細かく区切って余白を調整するしかないでしょうか？

CodePenでサンプルを作ったのでこちらをご覧になるとわかりやすいかと思います
CodePen

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <title>Bootstrap Example</title>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1">
7  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
8  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
9  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
10</head>
11<body class="bg">
12
13<div class="container">
14  <div class="col-md-8 col-xs-12 col-md-offset-2">
15    <div class="gallery-slide-wrapper">
16      <div id="sampleCarousel" class="carousel slide" data-ride="carousel">
17        <div class="carousel-inner" role="listbox">
18          <div class="index__gallery-image-area item active">
19            <img class="index__gallery-image" src="http://placehold.jp/150x50.png" alt="First slide">
20            <div class="carousel-caption">
21              <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
22            </div>
23          </div>
24          <div class="index__gallery-image-area item">
25            <img class="index__gallery-image" src="http://placehold.jp/24/cc9999/993333/150x50.png" alt="First slide">
26            <div class="carousel-caption">
27              <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
28            </div>
29          </div>
30        </div>
31        <a class="left carousel-control" href="#sampleCarousel" role="button" data-slide="prev">
32          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
33          <span class="sr-only">前へ</span>
34        </a>
35        <a class="right carousel-control" href="#sampleCarousel" role="button" data-slide="next">
36          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
37          <span class="sr-only">次へ</span>
38        </a>
39      </div>
40    </div>
41  </div>
42</div>
43
44<div style="border:1px solid #ccc; margin: 32px 0;"></div>
45  
46  
47</body>
48</html>

CSS
1.bg {
2  background: #F7F7F7;  
3}
4
5.gallery-slide-wrapper {
6  overflow: hidden;
7  padding-bottom: 90px;
8}
9
10.carousel-inner {
11  overflow: visible!important;
12}
13
14.index__gallery-image-area {
15  width: 100%;
16}
17
18.index__gallery-image {
19  width: 100%;
20}
21
22.carousel-caption {
23  background: #FFFFFF;
24  color: #212121!important;
25  text-shadow: none!important;
26  padding: 16px!important;
27  text-align: left!important;
28  top: 96%!important;
29  bottom: auto!important;
30  left: 25%!important;
31  width: 50%!important;
32}
33
34.carousel-control.right {
35  background-image: none;
36}
37.carousel-control.left {
38  background-image: none;
39}
40
41@media (max-width: 480px) {
42  .carousel-caption {
43      top: 80%!important;
44      bottom: auto!important;
45      left: 5%!important;
46      width: 90%!important;
47  }
48}