How to keep an image responsive and not effect other elements?

I'm trying to include an image above text, however it affects the text if I resize that image. Whatever I try to do, either it losses responsiveness or moves text under the screen (I have one page 'body' with hidden overflow). I managed to move an image to the center of the screen both in height and width without it affecting the text below, but changing it's width makes it non responsive and moves other elements. Any help?

In short: I want that image above the text, bigger, responsive and not affecting the text.

.pagr_foto {
  border-style: solid;
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
}

.container {
   
    position: absolute;
    left: 30%;
    top: 64%;
    max-width: 70%; 
  }
  
  .icon {
    width:85px;
    height: auto;
    margin-left: 35%;      
}
.rows {
    display: flex;
    flex-direction: row; 
    width: 80%;
    max-width: 80%;   
    column-gap: 8px;
    margin-left: 5%; 
}

 <div class="container">
           <!--DIDELE FOTKE STARTS-->
    <div class="pagr_foto">
        <div class = "pagr_foto_remas">
            <img src="https://sites.google.com/site/mate02trucha/_/rsrc/1472875957853/config/google_.jpg" class="pagr_foto_img"/>
        </div>

    </div>
   

      <!--DIDELE FOTKE ENDS-->
    <!--TEKSTAS PO APACIA STARTS-->
  <div class = "fadein"> <!--FADE IN ANIMACIJA-->
        <div class="container_text">
            <div class = "rows">
              
            <div class="feature">
                <div style="display:flex;flex-direction:column"> 
                  <!--KAD ICONS BUTU VIRS TEKSTO-->
                <img src="assets/images/group.png" class="icon" />
                <h3>Watch or listen together</h3>
                <p>
                  Start a session and invite your friends by sharing your friend code with them.
                </p>
                </div>
              </div>
              <div class="feature">
                <div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
                <img src="assets/images/list.png" class="icon" />
                <h3>Build up the queue</h3>
                <p>
                  Browse for your favorite media and add the URL to the queue. A number of popular websites are already supported for playback.
                </p>
                </div>
              </div>
              <div class="feature">
                <div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
                <img src="assets/images/chat.png" class="icon" />
                <h3>Use enhanced features</h3>
                <p>
                  New features are added on top of streaming websites such as real-time chat and timestamp markers.
                </p>
              </div>
              </div>
              </div>
              </div>
              </div>
              </div>

Solution

why you don't use Bootstrap instead of CSS3? Like this for example:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<title>Sample</title>
</head>
<body>

<div class="container">
<div class="row">
    <div class="col-12">
        <img class="img-fluid" src="https://sites.google.com/site/mate02trucha/_/rsrc/1472875957853/config/google_.jpg" class="pagr_foto_img"/>
    </div>

<div class="row">
    <div class="col-4">
           <img class="img-fluid" src="https://estaticos.muyinteresante.es/media/cache/1140x_thumb/uploads/images/gallery/59c4f5655bafe82c692a7052/gato-marron_0.jpg" class="icon" />
            <h3>Watch or listen together</h3>
            <p>
              Start a session and invite your friends by sharing your friend code with them.
            </p>
    </div>
    <div class="col-4">
            <img class="img-fluid" src="https://dam.ngenespanol.com/wp-content/uploads/2019/02/gatos-caja-2.png" class="icon" />
            <h3>Build up the queue</h3>
            <p>
              Browse for your favorite media and add the URL to the queue. A number of popular websites are already supported for playback.
            </p>
    </div>
    <div class="col-4">
            <img class="img-fluid" src="https://ichef.bbci.co.uk/news/640/cpsprodpb/10E9B/production/_109757296_gettyimages-1128004359.jpg" class="icon" />
            <h3>Use enhanced features</h3>
            <p>
              New features are added on top of streaming websites such as real-time chat and timestamp markers.
            </p>
    </div>
</div>
</div>
</div>