在网格内调整图像大小，并与其他部分对齐

Question

此外，我不知道如何使用列调整图像的大小，我尝试了很多人告诉我使用的方法，但没有一个起作用。我尚未找到解决方案。我正在尝试使每个网格区域中的图像变小。但是，如果我手动将像素宽度设置为某些值，则不会改变。是否需要更改网格区域的宽度？我很困惑，因为我正在关注一个教程，其中图像的大小与我使用的大小相同，而css设置与我的相同，但是我得到的图像更大，并且大小不会改变。我知道要翻转它们，我需要使用命令：-1并不是问题，它只是尺寸。

current layout of my page 1

current layout of mine 2

这是我想要实现的目标...

for small screens for big screens

<section class="about">
  <div class="grid-container">
<article class="about-container">
    <div class="title">
        <h1 class="title_name">our story</h1>
        <p class="title_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis et, doloremque blanditiis tempora deserunt repudiandae!
            Reprehenderit amet reiciendis recusandae odio. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam, libero ex sit ut dolores veritatis nemo voluptatibus, sequi quasi temporibus magni, accusantium labore delectus? A accusamus provident ut ipsa libero.</p>
      </div>
<div class="about_image">
    <img src="img/bravo.jpg" class="about__img" alt="about-img">
</div>
</article><!--about column 1-->

<article class="about-container">
    <div class="title">
        <h1 class="title_name">our story</h1>
        <p class="title_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis et, doloremque blanditiis tempora deserunt repudiandae!
          Reprehenderit amet reiciendis recusandae odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi voluptatem fugiat provident labore animi quidem beatae molestiae voluptates officia odit mollitia, cumque atque itaque eaque, ipsam ducimus aliquid vitae deserunt?</p>
      </div>
      <div class="about_image">
          <img src="img/bravo.jpg" class="about__img" alt="about-img">
      </div>
</article>
</div><!--grid container-->
</section>

.about_img{
    display: block;
}

.grid-container{
    max-width: 90vw;
    margin: 2rem auto;
    display: grid;
    grid-row-gap: 2rem;
}

@media screen and (min-width:768px){
    .grid-container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 4rem;
    }
}

.grid-container{
    max-width: 75vw;

}

.title{
    padding: 1rem 0.5rem;
}

.title_name{
    font-size: 3em;
    text-transform: capitalize;
}

.title_underline{
   background: #F4D06F;
width: 5rem;
height: 0.25rem;
}

.title_text{
    letter-spacing: 0.1rem;
    line-height: 1.5;
    margin-top: 1rem;
    color: grey;
}

.about-container{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto 1fr;
    grid-gap: 2rem;

}