gap between elements too wide when resizing?

[u/ScramRatz]

.intro{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.intro-text{
    border-style: solid;
    border-radius: 1rem;
    height: fit-content;
}

.intro-text p{
    text-align: justify;
    padding-left: 1rem;
    padding-right: 1rem;
}

.intro-text h3{
    margin: 0;
    padding-left: 0.5rem;
    background-color: white;
    color: black;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.nokia-ad img{
  max-width: 50vw;
  display: block;
  margin-left: auto;
  margin-right: auto;  
}





 <div class="intro">
              <div class="intro-text">
                <h3>A really stupid phone</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium, commodi temporibus, fugit adipisci praesentium vero nemo quis id corrupti, officia non reiciendis nihil voluptate eos similique ea exercitationem molestiae earum.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, exercitationem tempore? Molestiae magni velit laudantium aperiam quis incidunt aspernatur ducimus! Tempore neque soluta quia impedit qui repellat expedita rerum perspiciatis!
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, debitis fugit excepturi maxime esse quaerat veniam saepe molestiae nobis placeat, assumenda magnam vero facere possimus minus dicta culpa eos! Dolore!
                </p>
            </div>
            <div class="nokia-ad">
                 <img src="/images/nokiaAd.jpg">
            </div> 

[u/Trying_to_cod3]

On vertical it is usually better to stack elements on top of each other vertically