Почему размер сетки влияет на высоту каждой карты?

Question

Я хочу растянуть свою первую карточку так, чтобы она занимала 2 столбца вместо 1, но я хочу, чтобы высота оставалась такой же, как есть, но как только я установил диапазон 1/3, он удваивает высоту. * Ссылка на картинки:

https://imgur.com/paOgwck

https://imgur.com/ejfcwwQ

<div class="grid-3 grid_gap-2 py-6">
            <div class="about-card p3 grid_span-1">
              <h3 class="text-center p1">Our Community</h3>
              <div class="img-container">
                <img src="./images/aboutimg1.jpg" alt="" class="img" />
              </div>
              <p class="py-2">
                <strong>Lorem ipsum dolor</strong> sit amet consectetur
                adipisicing elit. Eos debitis qui quis quasi harum unde
                voluptatem dolore nesciunt natus. Dolorum suscipit, ad est
                quibusdam quos unde iure, perferendis quasi illo sit fugit!
                Libero, totam tempore?
              </p>
            </div>

CSS:

.grid_span-1 {
  grid-column: 1 / 3;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Спасибо