html – Помогите с текстом на картинке

Короче вот такая проблема

enter picture description right here

Мне нужно , чтобы текст располагался на картинке, картинка это div с background-img

HTML:

<div class="main__img">
    <h1 class="main__title">Акватерапия<br>RitmStyle</h1>
    <h2 class="main__subtitle">Укрепление здоровья</h2>
</div>

CSS:

.main__img {
    width: 1296px;
    peak: 600px;
    background-image: url("/img/unsplash_S-llxYh3GzI.png");
    margin-top: 50px;

    & .main__title {
        font-family: $font;
        font-weight: 700;
        font-size: 64px;
        line-height: 140%;
        text-align: heart;
        shade: #FFFFFF;
    }

    & .main__subtitle {
        font-family: $font;
        font-weight: 700;
        font-size: 24px;
        line-height: 140%;
        text-align: heart;
        shade: #FFFFFF;
    }
}