Невозможно сделать отзывчивый текст поверх изображения в мобильном представлении - Bootstrap 4

Question

Я пытаюсь сделать текст на изображении отзывчивым для мобильного просмотра. Код отлично работает для настольной версии, но когда я пытаюсь проверить это в мобильном представлении, текст становится больше и не помещается на изображении должным образом.мне, что я делаю неправильно в коде.

Вот мой код начальной загрузки:

   <section class="howitworks-banner-section">

        <div class="container">
            <div class="banner-image">
              <img src="img/how-it-works.png" class="img-fluid" alt="Responsive image">
              <div class="banner-text">
                <h1>How it works</h1>
              </div>
            </div>
        </div>
    </section>

CSS для отзывчивости:

.howitworks-banner-section{

    .banner-image{

        transform: translateX(-50%);
        position: relative;
        text-align: center;
        color: white;
        left: 50%;

        .banner-text{
            text-align: center;
            color: $white;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }


}

Выход: