Making LHS image the size as the CMS grid on the right hand size

Design help CMS
1

Hi, everyone I’m getting really bamboozled by something at the moment.

My layout is supposed to look something like this image below:

Screenshot 2022-07-28 at 14.14.52
Screenshot 2022-07-28 at 14.14.521920×747 125 KB

If you take a look at the read-only link you will see that it works pretty well when the images are in landscape mode but when they’re in portrait mode that’s a whole new ball game, especially if the grid images are landscape. This can be seen when looking at the 1 bedroom in Oud West CMS item.

I’ve been a bit of a naughty boy and made a cheeky little hack which fixes it on the live version (using Javascript) but I know that’s not the right way of doing it.

The hack I did was as follows:

      function isMobile() {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
      }

      if (!isMobile()) {
            $("#image-container").css("max-height", $("#more-images").css("height"));
      }

Here is my public share link: https://preview.webflow.com/preview/vakay?utm_medium=preview_link&utm_source=dashboard&utm_content=vakay&preview=10fddd0e298674ce9435808071c321aa&workflow=preview
(how to access public share link)

2

Bonus points if someone can walk me through how they would go about putting that overlay on just the last image of the CMS. I’ve tried styling the last CMS item using the dropdown where you can set the state of the item, but since the div is inside the Collection item the changes are having no effect.