CSS grid responsive but words squishing down before moving to new row

I used repeat(auto-fit, minmax(300px,1fr)) to not only set the width but ensure responsiveness, however, as the screen gets smaller, the words in the article class squish down, i do not want that, is there a way to fix this?

.section-2 {
  display: grid;
  margin-top: 50px;
  margin-bottom: 50px;
  row-gap: 40px;
  column-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.container {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
}

.image {
  grid-column: 1;
  width: 200px;
  height: 254px;
}

.article {
  align-self: center;
  justify-self: start;
  grid-column: 2;
}

.headings :nth-child(1) {
  font-family: extra-bold;
  font-size: 1.5rem;
  color: grey;
}

<div class="section-2">

  <!-- first-image-->

  <div class="container">
    <img src="https://images.unsplash.com/photo-1665770020130-9a363c7f06db?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0Mjc3MDE&ixlib=rb-4.0.3&q=80" class="image image1" />

    <div class="article article1">
      <div class="headings">
        <p>01</p>
        <p>Lorem Ipsum</p>
        <p>Donec laoreet viverra nibh, et viverra felis dignissim nec.</p>
      </div>
    </div>
  </div>

  <!-- second-image-->
  <div class="container">
    <img src="https://images.unsplash.com/photo-1665770020130-9a363c7f06db?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0Mjc3MDE&ixlib=rb-4.0.3&q=80" class=" image image2" />

    <div class="article article2">
      <div class="headings">
        <p>02</p>
        <p>Lorem Ipsum</p>
        <p>Donec laoreet viverra nibh, et viverra felis dignissim nec.</p>
      </div>
    </div>
  </div>
  <!-- third-image-->
  <div class="container">
    <img src="https://images.unsplash.com/photo-1665770020130-9a363c7f06db?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0Mjc3MDE&ixlib=rb-4.0.3&q=80" class="image image3" />

    <div class="article article3">
      <div class="headings">
        <p>03</p>
        <p>Lorem Ipsum</p>
        <p>Donec laoreet viverra nibh, et viverra felis dignissim nec.</p>
      </div>
    </div>
  </div>

</div>

I was trying to to get the blocks to be responsive, they somewhat are but the words squish down before moving to a new row, i do not want this.

Solution

Use flexbox for the container instead of CSS grid:

.section-2 {
  display: grid;
  margin-top: 50px;
  margin-bottom: 50px;
  row-gap: 40px;
  column-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.image {
  width: 200px;
  height: 254px;
}

.article {
  flex: 200px; /* this will be the minimum width of the text before the wrap */
  align-self: center;
  justify-self: start;
}

.headings :nth-child(1) {
  font-family: extra-bold;
  font-size: 1.5rem;
  color: grey;
}

<div class="section-2">

  <!-- first-image-->

  <div class="container">
    <img src="https://images.unsplash.com/photo-1665770020130-9a363c7f06db?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0Mjc3MDE&ixlib=rb-4.0.3&q=80" class="image image1" />

    <div class="article article1">
      <div class="headings">
        <p>01</p>
        <p>Lorem Ipsum</p>
        <p>Donec laoreet viverra nibh, et viverra felis dignissim nec.</p>
      </div>
    </div>
  </div>

  <!-- second-image-->
  <div class="container">
    <img src="https://images.unsplash.com/photo-1665770020130-9a363c7f06db?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0Mjc3MDE&ixlib=rb-4.0.3&q=80" class=" image image2" />

    <div class="article article2">
      <div class="headings">
        <p>02</p>
        <p>Lorem Ipsum</p>
        <p>Donec laoreet viverra nibh, et viverra felis dignissim nec.</p>
      </div>
    </div>
  </div>
  <!-- third-image-->
  <div class="container">
    <img src="https://images.unsplash.com/photo-1665770020130-9a363c7f06db?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0Mjc3MDE&ixlib=rb-4.0.3&q=80" class="image image3" />

    <div class="article article3">
      <div class="headings">
        <p>03</p>
        <p>Lorem Ipsum</p>
        <p>Donec laoreet viverra nibh, et viverra felis dignissim nec.</p>
      </div>
    </div>
  </div>

</div>