Перекрытие адаптивных фоновых изображений CSS не работает [закрыто] ⇐ CSS

[Anonymous]

У меня возникли проблемы с пониманием того, как создать этот макет.
У меня есть одна оболочка, содержащая двух дочерних элементов. Одно слева, другое справа.
Правый дочерний элемент содержит два изображения, которые должны перекрывать друг друга и быть отзывчивыми одновременно.
Я пробовал разные решения с позиционированием, CSS-сетками и простым flexbox, но это выглядит не очень хорошо.
Эти два изображения являются фоновыми, и я не знаю, проблема в этом или в чем-то другом, но я не вполне понимаю. Это работает, когда я устанавливаю фиксированную ширину и высоту для изображений, но на самом деле я хочу, чтобы они реагировали и расширялись до максимального размера, который должен быть для первого изображения (ширина: 526 пикселей, высота: 521 пиксель) и второго изображения. (ширина: 308 пикселей, высота: 412 пикселей), но кажется, что это неправильно, и тогда они больше не реагируют.
Какие советы?
Вот моя песочница и вот пример того, как я пытаюсь ее выглядеть:
Дизайн макета
Я пробовал изменить CSS к сеткам, флексбоксам и простому позиционированию безуспешно. Это работает при установке изображений фиксированной ширины и высоты, но мне это не нужно.

Подробнее здесь: https://stackoverflow.com/questions/786 ... ot-working