Hi there,
You would add your two images using HTML like so:
<img class="hero-image mobile hide-on-desktop hide-on-tablet" src="URL_to_mobile/image.jpg" alt="Alt text" width="500" height="600">
<img class="hero-image desktop hide-on-mobile" src="URL_to_desktop/image.jpg" alt="Alt text" width="500" height="600">
I included the hide-on-* classes:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes
Then you can use this CSS to position:
.page-hero {
position: relative;
}
.hero-image {
position: absolute;
bottom: 0;
left: 0;
}
You will need to make sure the Header Element has enough bottom padding to accomodate the image to stop it from overlapping the content.