Es steht oben und unter über.
Das liegt daran, das man dem Bild eine "Basis" geben muss, auf dessen Grundlage es angepasst wird.
Im bisherigen Code haben wir dafür "min-width: 200px" verwendet.
Jetzt hast du in deinem CSS "max-heigt: 55%", das geht auch.
Allerding ist diese Angabe in der Media-Query mit der Bedingung "max-width: 750px" verknüpft.
Dein S9+ hat horizontal ausgerichtet sicherlich genau wie das S10+ 760px, daher greifen die Angaben im Media-Query hier nicht mehr.
Du kannst jetzt entweder einen angepassteren Wert, der auf beiden Ansichten greift, als "Basis" setzen, oder du kannst auch eine Media-Query speziell für die horizontale Ansicht nutzen...
Btw. schmeiß das "display: flex" aus deinem img-Block, das hat da nichts zu suchen.
Flex & Grid sind sinnlos bei einem einzigen Element ohne Kindelemente.
Und noch eine kleine Ergänzung:
Da du jetzt offensichtlich den Text unter dem Bild haben willst ist es Blödsinn, die <section> weiterhin als "position: absolut" zu belassen und dann mit padding zu arbeiten!
Schmeiß position & padding raus, gib dem <header> "flex-direction: column" und der <section> "order: 1".
Und auch deine <section> braucht kein "display: flex", da h1 & p standardmäßig "display: block" haben und somit automatisch untereinander gesetzt werden. Da ist "display: flex & flex-direction: column" völlig sinnlos.
Und nimm doch endlich die "margin-right: 30rem" weg...
Oh, ich Depp habe grad erst dein Bild gesehen, in dem auch die Abmessungen (658px) zu sehen sind...
Aber egal, ändert nichts an der Begründung.