Как при помощи grid расположить изображение справа от текста?

Подскажите пожалуйста как расположить изображение справа от текста так, что бы оно не вылезало за пределы карточки. Получается так:

А должно выглядеть так:

Хотелось бы узнать как лучше располагать изображение в контейнере, чтобы оно не выходило за его пределы, чтобы потом получилась адаптивная вёрстка.

Вот мой код: HTML:

  <section class="shop">
    <div class="shop__gr">
      <div class="div__1 cart">
        <h1 class="cart__shop">Фильтрующие<br> материалы </h1>
        <p>Только лучшие фильтроматериалы<br> в наличие на складах!</p>
        <button type="button" class="button__catalog__full button"><span>Подробнее </span><img class="image__but" src="/img/buttt.png"></button>
        <img class="image_catalog" src="/img/image1_catalog.png">
      </div>


      <div class="div__2 cart">
        <h1 class="cart__shop">Кондиционеры и сплит Системы </h1>
      </div>
      <div class="div__3 cart">
        <h1 class="cart__shop">Фильтрующие материалы </h1>
      </div>
      <div class="div__4 cart">
        <h1 class="cart__shop">Фильтрующие материалы </h1>
      </div>
      <div class="div__5 cart">
        <h1 class="cart__shop">Фильтрующие материалы </h1>
      </div>
      <div class="div__6 cart">
        <h1 class="cart__shop">Фильтры для вентиляции</h1>
      </div>
      <div class="div__7 cart">
        <h1 class="cart__shop">Фильтрующие материалы </h1>
      </div>
      <div class="div__8 cart">
        <h1 class="cart__shop">Фильтрующие материалы </h1>
      </div>
      <div class="div__9 cart">
        <h1 class="cart__shop">Фильтрующие материалы </h1>
      </div>
      <div class="div__10 cart">
        <h1 class="cart__shop">Фильтрующие материалы </h1>
      </div>
      <div class="div__11 cart">
        <h1 class="cart__shop">Фильтрующие материалы </h1>
      </div>
      <div class="div__12 cart">
        <h1 class="cart__shop">Фильтрующие материалы </h1>
      </div>

    </div> 


  </section>

CSS:

.button__catalog__full{
  border-radius: 8px;
  font-size: 18px;
  background-color: #12e435;
  border: 0px;
  cursor: pointer;
  font-family: Montserrat;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

.shop__gr{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
}

.cart{
  background-color: #EBEFEC;
  padding: 15px;
  margin: 15px;
  border-radius: 10px;
  display: grid;
}

.image_catalog{
  display: grid;
  grid-column: 2;
}

.div__1{
  /* grid-column-start: 0;
  grid-column-end: 2;
  grid-row-start: 0;
  grid-row-end: 2; */
  width: 670px;
  height: 376px;
  grid-area: 1/1/3/3;
  /* display: grid; */
}
 
.div__1 p{
  grid-column: 1;
}

.div__1 button{
  grid-column: 1;

}

.div__2{
  grid-area: 1 / 3 / 1 / 3;
}
.div__3{
  grid-area: 1 / 4 / 1 / 4;
}
.div__4{
  grid-area: 3 / 1 / 3 / 1;
}
.div__5{
  grid-area: 3 / 2 / 3 / 2;
}
.div__6{
  grid-area: 2 / 3 / 4 / 5;
}
.div__7{
  grid-area: 4 / 1 / 6 / 3;  
}
.div__8{
  grid-area: 4 / 3 / 4 / 3;
}
.div__9{
  grid-area: 4 / 4 / 4 / 4;
}
.div__10{
  grid-area: 5 / 3 / 7 / 5;
}
.div__11{
  grid-area: 6 / 1 / 6 / 1;
}
.div_12{
  grid-area: 6 / 2 / 6 / 2;
}