1 - I want to as simply as possible have it so my H1 and H2 resize when the screen is made smaller without having to specific the exact font size for each screen width. Is that possible? If so what is the best way of doing that?
2 - how can i center the larger image below the h2?
For your H1 and H2 to be more responsive without you having to change the size for every resolution try to stay away from pixels, use % or vw or vh or something else, look at all the options from the designer. For you larger image to be centered it would have to be on a different container. Place your text in one container and your images on another one and set the parent element of those containers to flex centered in the middle. Or, you can set your large image to position relative and move where you want it to be.