CSS and responsive design - Maintain layout of card contents and image

Question

I have a design mockup, which looks like this -

At certain viewports, the phone image, card, and the text don't maintain their aspect ratios and the content flows out completely. I am using % based units to keep it responsive, but it is not helping out much.

Here are is an example:

Even exiting the full-screen mode on my mac wrecks the layout:

I looked up this question but it didn't help much - Maintain the aspect ratio of a div with CSS

Is there a better way to approach this problem and solve it? Because the only solution I have now is changing the height and width using media queries, but it is not working well except for a few viewports, mostly the ideal full-screen mode.

Thank you for any help! I have been going on at this problem for a long time now, and I haven't been able to get a consistent solution to this.

link to website - https://hackertronix.com/#projects

HTML:

<div class="card">
      <img src="images/murphy.png" class="phone-img">
      <div class="info-container">
           <div class="info-wrapper">
                <h2>
                    Murphy
                </h2>
                <h3>
                Murphy is a Peer-to-Peer, decentralized ATM platform
                that allows users to issue localized cash request broadcast within their peer network.
                Upon request acceptance the balance is settled via a wire transfer to the remitter's bank.
                The app makes use of geolocation features for allowing users to find each other.
                 </h3>
                 <div class="group">
                      <div class="left-icon">
                           <a target="_blank" href="http://github.com/Hackertronix/Project-Murphy">
                           <img src="images/checkOnGithub.png" class="github-googleplay-button">
                           </a>
                 </div>
                 <div class="right-icon">

                 </div>
           </div>
   </div>

CSS:

.card {
    opacity: 0;
    height: 100%;
    position: relative;
    z-index: 50;
    width: 100%;
}

.phone-img {
    position: relative;
    margin-left: 11%;
    margin-top: 6%;
    z-index: 50;
    height: 85%;
    width: auto;
}

.info-container {
    position: absolute;
    top: 20%;
    left: 25%;
    z-index: 49;
    width: 62%;
    height: 58%;
    background-color: white;
    border-top-right-radius: 1.125em;
    border-bottom-right-radius: 1.125em;
    box-shadow: 0 0.125em 0.9375em 0 rgba(0, 0, 0, 0.5);
}

.info-wrapper {
    width: 90%;
    height: 100%;
    margin-left: 30%;
    margin-top: 4%;
    margin-right: 5%;
    z-index: 49;
}

.info-container h2, .info-container h3 {
    color: #1f3264;
}

.info-container h2 {
    font-family: Graphik-Semibold, Roboto ;
    font-size: 2em;
    margin-bottom: 4%;
}

.info-container h3 {
    font-family: Graphik-Regular, Roboto;
    font-size: 1.3em;
    line-height: 1.57;
    font-weight: normal;
    margin-bottom: 4%;
    text-align: justify;
    width:70%;
}

.left-icon {
    float: left;
    width: 41%;
    position: relative;
    z-index: 50;
}

.right-icon {
    float: right;
    width: 59%;
    position: relative;
    z-index: 50;
}


/***media queries****/

@media screen and (min-width:20em)  {
     .card {
        display: none;
    }
}


@media screen and (min-width:64em) {
      .card {
        display: block;
    }

    .info-container {
        width:70%;
        left: 22%;
    }

    .phone-img {
        margin-left: 5%;
        margin-top: 7%;
    }

    .fp-slidesNav {
        display: block;
    }

    .info-container h2 {
        font-size: 3em;
    }

    .info-container h3 {
        font-size: 1.7em;
    }
}


@media screen and (min-width:70em) {
     .card {
        display: block;
    }

    .overlay nav {
        font-size: 4em;
    }

    .phone-img {
        margin-top: 6%;
    }
}

@media screen and (min-width: 80em) {
       .info-container h2 {
        font-size: 2em;
    }

    .info-container h3 {
        font-size: 1.3em;
    }

     .info-container {
        width:62%;
        left: 25%;
    }

    .phone-img {
        margin-left: 11%;
    }
}