CSS: 1 parent + 2 children. Is it possible to have the image grow wider than its sibling only when it is in the landscape aspect ratio?

I am trying to make a dynamic image/sibling size, with flex-wrap, where by the image can be of varying aspect ratios. The issue is wide images. The behaviour I am seeking is as follows:

<div class="listing">
  <img src="${imgURL}" alt="${name}" />
  <div class="info">
         /* rest of code */
</div>

 .listing {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem;

    > img {
      flex: 1 1;
      width: 100%;
      max-width: 400px;
      object-fit: contain;
      background-color: #000000;
      border: 1px solid #000000;
    }

    .info {
      flex: 1 1;
      width: 100%;
      max-width: 400px;
      overflow: auto;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      border: 1px solid #000000;
}

The above is the code I have settled with. Its behaviour is that IMG/listing are always the same width. If an image is wide, it uses contain to add black borders top and bottom. What I would have preferred is the behaviour as follows:

square image:
when in landscape: same width, same height as child sibling
after flex-wrap, when in portrait: same width, same height as child sibling

tall image:
landscape: same width, same height, sibling grows in height to ensure it matches the image
portrait: same width, sibling is shorter, image is stacked on top so only their widths need to match

wide image:
landscape: image is wider than sibling, same height
portrait: same width, sibling is taller than image.

I have been experimenting with width/max-width on parent and the 2 children, as well as flex-basis on the children but nothing seems to fit. Object-fit is the wrong prop for the behaviour I am attempting to achieve, because it only affects how the image fits into the container, but what I am trying to achieve is to change the width of the image, when it has a wide aspect ratio, to be wider than its sibling, when in landscape mode.

Using responsive units is also not working, because it affects responsiveness negatively. When you zoom out, both children grow to take up the entire viewport, when you zoom in, they both shrink to remain in the viewport. Zooming out should have no effect on their size, the parent container should look small on zoom out, and zooming it should appear large, with possible overflow, though ideally some shrink lee-way to ensure it wraps into portrait and its edges touch the edges of the viewport. Using pixels is required, but the image aspect ratio is key to which of the 2 children consumes however many pixels, as well as the complication that on zoom the parent will flex wrap, so the second child will change shape.

The parent should have a perfect rectangle shape, horizontal in landscape, vertical in portrait, with both children touching the edges of the parent container.

You need to sign in to view this answers