Как отменить наложение текста при скролле CSS?

Question

[grande2k]

Добрый день, есть такая страница в которой находится информация о авторе, на мобильной версии заказчик просит добиться следующего результата при скролле текста: https://streamable.com/4cvcgq (Это готовая версия приложения для iOS, я делаю веб аналог).

Вот мой код, HTML:

<div class="curator__info">
            <div class="curator__details" >
                <h1 class="curator__name" v-text="curator.name"/>
                <p class="curator__about" v-text="curator.about"/>
            </div>
        </div>

И вот стили:

.curator__info {
                position: absolute;
                height: 100%;
                bottom: 0;
                z-index: 2;
                padding: 2rem;
                flex-direction: column;
                justify-content: flex-end;
                overflow: hidden;
            }
            .curator__details {
                flex: auto;
                position: relative;
                flex: 0 1 80%;
                bottom: 50px;
                overflow-y: auto;
                padding-top: 55%;
            }
            .curator__name {
                margin-bottom: 1.5rem;
                position: sticky;
                top: -86%;
            }

Вроде результат то что надо, и без JS обходится, но есть одна единственная проблема которую никак не получается решить, текст curator__about (описание) залазит под curator__name (имя куратора), вот видео: https://streamable.com/ov2n2b

Надо как то запретить текстам накладываться друг на друга, простым решением будет дать фон элементу curator__name, и тогда не будет видно этого накладываемого текста, но так нельзя. Буду рад если сможете помочь)

Вот ссылка на сайт https://devsite.rovr.live/#/, можете глянуть тыкнув на фотку или на имя:

Comments

[cssfish]

видеол недоступны, задача неясна