Quiero superponer dos imágenes, pero a la vez, quiero que respondan a la dimensión de la pantalla en la que las vemos. Me estoy ayudando de W3 Css para realizar algunos ajustes. Os dejo mis pruebas en este codepen
Para visualizarlo correctamente utilizo un monitor de 22" a 1920x1080. Quiero que las imágenes aparezcan superpuestas, y si se reduce la resolución de pantalla, ambas imágenes aparezcan centradas relativas al div llamado tercio, que se encuentra en el tercio derecho de la pantalla.
He visto varios posts en los que se explica cómo superponer imágenes, Cómo superponer dos imágenes, Superponer elementos
Pero no logro hacer que funcionen para resolver mi problema. Se supone que ambas imágenes, tienen position:absolute y se referencian al div llamado tercio, que a su vez tiene position:relative; justamente para conseguir esa referencia.
Lo que veo es que la posición absoluta la referencia al marco principal de la página, y no al div tercio que debería ser el container, por lo que cuando redimensiono, la imagen se sale fuera del marco y también un texto que he añadido.