Image size always max height on small screens with overflow-x hidden

Question

What's happening:

• As the screen gets smaller the image to the right of the hero keeps shrinking

What I'm trying to achieve:

• The image remains 100% height of the column at all times, even as the screen size reduces
• When the screen becomes to small, rather than shrinking the image it is instead pushed off the screen to the right

What I've tried:

• Countless variations of absolute position on the image with top: 0 and right: 0. For example, multiple variations of:

.svg-column-class{
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.svg-class{
  position: abolsute;
  top: 0;
  right: 0;
  height: 100vh;
  width: auto;
  overflow-x: hidden;
}

SO threads I've read but didn't help:

• CSS Max-Height with Hidden Overflow
• height: 100vh; and overflow "content" on smaller screens

The setup:

• I'm using Bulma
• Here's a codepen: https://codepen.io/arbitmcdonald/pen/RwxbvyW

What the hero looks like:

The image should always be the full height of the column

The image height should be preserved on small screens and go off to the right (overflow-x: hidden)

All that happens at the moment is the image gets smaller and smaller until I reach the tablet breakpoint and it's hidden. Here's what it looks like when the image gets smaller, rather than retaining its size and pushing off to the right: