Tricky responsive piece of UI

So I have this layout at a larger display:

I started with building the mobile version

Now the two images should gradually move away from each other as the display gets larger, and some re-ordering will also happen, so the images come first before the text.

The following is my current code, and everything gets messed up as soon as I stretch the screen size…

    section.story
      .container
        .story__head
          p.story__date Since 2010
          h4.story__title Victoria Blend
        
        .story__images
          .story__image-container
            .story__shape
              svg(width='78', height='263', fill='none', xmlns='http://www.w3.org/2000/svg')

            .story__image-wrapper
              img(src="assets/feat3.png")
          img.story__image(src="assets/feat4.png")
          h5.story__subtitle Designer Story
        
        .story__details
          p.story__text text goes here...........
          button.story__button.action-btn Discover the Story Behind
.story {
  margin: 24px 0;
  background: $gray-lightest;
  padding-top: 20px;

  &--no-bg {
    background: $white;
  }

  &__date {
    font-size: 12px;
    line-height: 17px;
    margin-bottom: 10px;
  }

  &__head {
    margin: 4px 0 16px 0;
  }

  &__title {
    text-transform: uppercase;
    font-size: 36px;
    line-height: 40px;

    @media only screen and (min-width: 650px) {
      font-size: 43px;
      line-height: 71px;
    }
  }

  &__images {
    position: relative;
    min-height: 515px;
  }

  &__image-container {
    position: absolute;
    max-width: 50%;
    top: 33%;
    transform: translateY(44%);
    z-index: 400;
  }

  &__image-wrapper {
    position: relative;
    display: block;
    height: 100%;
  }

  &__image {
    position: absolute;
    max-width: 90%;
    right: 0;
  }

  &__shape {
    position: absolute;
    z-index: 600;
    position: absolute;
    z-index: 600;
    left: 0;
    bottom: -130px;
    transform: translateX(-50%);

    svg {
      transform: scale3d(0.4,0.4,0.4);

      @media only screen and (min-width: 650px) {
        transform: scale3d(1,1,1);
      }
    }
  }

  &__subtitle {
    position: absolute;
    bottom: 6%;
    left: 37%;  
    font-size: 16px;
    line-height: 33px;
    font-weight: normal;
    letter-spacing: 6px;
    z-index: 500;
    
    @media only screen and (min-width: 650px) {
      font-size: 20px;
      letter-spacing: 12.5px;
    }
  }

  &__details {
    margin-top: 12px;
  }

  &__text {
    line-height: 23px;
    font-size: 14px;
  }

  &__button {
    margin: 20px auto 0;
  }
}

Here’s a fiddle to demonstrate better: https://jsfiddle.net/mests/Lcoxwjet/2/

I would also appreciate any comments regarding any part of the code. I really need any suggestions.