grid row element height depending on resolution issue

Hi Enfold wizards,

I have run into a problem that i can’t find a solution to.
I am making a design using a grid row element with to rows. The left row is mostly a scrollable gallery and the right row contains album cover artwork and an audio player.
My problem is setting the right height for the grid row.
I would like the right row to always allow the full artwork to be shown. And the left row to just follow the height of the right.
However when I view the site on screens with higher or lower resolutions, the height changes and either cuts of the album artwork or leaves a grey area beneath it. You can view screenshots of it here: https://imgur.com/a/S0hr93Y
Right now i have set the height to 70.7rem, but what I really want is for the height to be determined by the artwork in the right row. Since album cover artwork is always square I’m thinking it should be possible to have the height match the width of the row 1:1 somehow.

Is that possible?

Here is the code in quick css that I have used so far:
scroll-record is the id of the grid row element and scrolling-col is the class of the left column

#scroll-record .flex_cell_inner {
height: 70.7rem !important;
}

.scrolling-col {
height: 39.5rem!important;
max-height: 39.5rem!important;
overflow: scroll!important;
overflow-y: scroll!important;
width: 20%!important;
}

I’ve provided link and login details below.

Hope you can help.

Best,
Andreas