Изображения, отличия z-index и слайдера. Чистый CSS

Question

У меня проблема, которую я не могу решить.

У меня есть слайдер с несколькими изображениями и контентом. Это нормально, но нам нужно добавить белую кривую, и она всегда видна (не меняйте с помощью ползунка).

Проблема в том, что у меня 2 изображения. Один на заднем плане и два на кривой.

Но оба имеют разных родителей, поэтому z-index не работает.

Пример моей структуры:

<div class="header--content">
    <div class="sliders">
        <div class="slider">
            <img class="background-slider" src="myslider01.jpg" alt="Slider">
            <div class="slider--content">
                <h2>Foo</h2>
                <p>Bar</p>

                <img src="myimage01.png" alt="image">
            </div>
        </div>
        <div class="slider">
            <img class="background-slider" src="myslider02.jpg" alt="Slider">
            <div class="slider--content">
                <h2>Bar</h2>
                <p>Foo</p>

                <img src="myimage02.png" alt="image">
            </div>
        </div>
    </div>
    <div class="curve">
        <img src="mycurve.jpg" alt="Curve">
    </div>
</div>

myimage01.png и myimage02.png - это то, что должно быть больше mycurve.jpg

Я использую Slick для создания слайдеров, поэтому я не знаю, как его отредактировать или добавить Javascript, поэтому я пытаюсь понять, как поступить с чистым CSS. Возможно ли это?

Спасибо