CSS - Bild Höhe neben flexiblen Text Container anpassen, wenn Display schmaler wird

[ebody]

Hallo,

ab einer Breite von 1024px sieht der Abschnitt so aus:

Die Textbox ist flexibel und passt sich bei einer schmaleren Breite an. Dadurch wird die gesamte Textbox höher. Das Bild soll links die gleiche Höhe wie die Textbox füllen.

Das Bild hat ein Hochformat und ist in Wirklichkeit viel länger als im Abschnitt angezeigt, eben für diesen Fall. Der "Ausschnitt" des Eltern Elements aber passt sich nicht der neuen Höhe an. Ich wüsste gerade auch nicht, wie man diesen Ausschnitt in der Höhe flexibel machen könnte.

<div class="img-box"><img src="https://cdn.pixabay.com/photo/2022/08/26/04/19/beach-7411683_960_720.jpg" /></div>

.img-box{
  grid-column: 2/3;
  min-height: 328px;
  height: 100%;
  max-height: 700px;
  width: 100%;
  overflow: hidden;
}

img{
  width: 462px;
} 

Mit Media Queries könnte man es lösen, aber dann müsste man ja jede Pixelbreite pro einzelnen Pixel abfragen. Daher wollte ich mal fragen, ob jemand hierfür eine Idee, Lösung kennt, um es ohne Media Queries zu lösen?

Gruß ebody