Banner bootstrap with 2 responsive images

[! [enter the description of the image here] [1]] [1]

[1]:

<!-- Banner -->
<section class="banner">
    <div class="container-fluid banner__container" >
        <div class="row banner__row">
            <div class="col-12 col-lg-6 banner__paragraphs">
                <div class="paragraphs__container">
                    <h1 class="m-4 hero-heading paragraphs__title m-0">Lorem Ipsum Dolor Sit Amet </h1>
                    <h2 class="m-4 paragraphs__subtitle">Lorem Ipsum Dolor Sit Amet</h2>
                </div>
                <button class="ml-4 paragraphs__button shadow btn btn-secondary">Primary</button>
            </div>
            <div class="col-12 col-lg-6 banner__media">
                <div class="banner__images">
                    <div class="images__phone"></div>
                    <div class="images__capture"></div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /////////////////////////////////////////////////////// -->

/ css /

/*banner */


/* Height control */
.banner {
    margin-top: 100px;
    padding: 0;
    /*overflow: hidden;*/
    background-color: rgb(2, 117, 216);
}

.banner__container,
.banner__row {
    min-height: 100%;
}

/* --- paragraphs --- */

.paragraphs__subtitle {
    font-size: 'Open Sans';
    color: #ffffff;
    font-size: 30px;
}

.banner__paragraphs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: white;
}

.paragraphs__title,
.paragraphs__subtitle {
    text-align: center;
}

/* --- media ---*/

.banner__media {
    min-height: 530px;
    padding: 0; /* rid bootstrap padding*/
    width: 100%;

}

.banner__images {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.images__phone {
    position: absolute;
    z-index: 200;
    height: 130%;
    width: 100%;

    background-image: url('../images/iphone.png');
    background-size: cover;
    animation-name: slideInUp;
    animation-delay: 0.4s;
    animation-duration: 0.75s;
}

.images__capture {
    position: absolute;
    z-index: 100;
    height: 135%;
    width: 100%;
    background-image: url('../images/admin.png');
    background-size: cover;
    animation-name: slideInUp;
    animation-delay: 0.2s;
    animation-duration: 0.75s;
}

.images__phone,
.images__capture {
    top: 25px;
}

@media (min-width: 700px) {

    .images__phone,
    .images__capture {
        left: 20vw;
    }


}

@media (min-width: 800px) {

    .images__phone,
    .images__capture {
        left: 30vw;
    }


}


@media (min-width: 992px) {

    .banner {
        margin-top: 60px;
        max-height: calc(100vh - 60px)
    }

    .banner__paragraphs,
    .banner__media {
        max-height: calc(100vh - 60px);
    }

    .paragraphs__title,
    .paragraphs__subtitle {
        text-align: left;
    }

    .images__capture {
        height: 130%;
    }

    .images__phone,
    .images__capture {
        top: 25px;
        left: 0;
    }

    .banner__paragraphs {
        align-items: flex-start;
    }

}

@media (min-width: 1200px) {

    .images__capture {
        height: 135%;
    }

    .images__capture,
    .images__phone {
        left: 10%;
    }

}

@media (min-width: 1300px) {
    .images__capture,
    .images__phone {
        left: 20%;
    }
}
@media (min-width: 1600px) {
    .images__capture,
    .images__phone {
        left: 40%;
    }
    .paragraphs__title,
    .paragraphs__subtitle {
        margin: 0;
        padding: 0;
    }
}
/*banner*/

There is a problem that in other resolutions the elements of the image of the capture and the cell move and should always maintain that proportion and position in any resolution, and in mobile the images should be moved downwards but in the same position. and right up to the blue button.

pd: the banner must always occupy the entire height on different monitors, and obviously the text and images are adjusted to that resolution, but instead of that, the text shrinks, the images shrink or move a little upwards.

I do not know what else to do :(, maybe as a friend says, with javascript it would be solved, but I'm not very proficient at js.

that without counting that I can not integrate midnight.js on this web page to change the color of the nav and the color of text and icon.

please, help!.