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…

          p.story__date Since 2010
          h4.story__title Victoria Blend
              svg(width='78', height='263', fill='none', xmlns='')

          h5.story__subtitle Designer Story
          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:

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