Spacing in between items in a flex column container

Question

I am having a grid parent layout and having each child item as a flex box with column layout. I am able to put the items to the center of the flex box but unable to define the right spacing between in the elements. I want the items to be close enough to look good but not that close. Here is my fiddle

If you see this fiddle, the icon (Insta) and the other two texts are far apart. How can define the spacing responsively so that it doesnt break while loading on phone too.

 .wrapper {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-gap: 10px;
    }
    
    .box {
      display: flex;
      border:1px solid black;
      flex-direction: column;
      flex-wrap: wrap;
      align-items:center;
      gap:10%;
    }

<div class="wrapper">
      <div class="box a">
        <img src="https://img.favpng.com/9/25/24/computer-icons-instagram-logo-sticker-png-favpng-LZmXr3KPyVbr8LkxNML458QV3.jpg" width="50%" height="50%"/>
        <p>
        Insta
        </p>
        <p>
        Take photos
        </p>
      </div>
      <div class="box b"></div>
      <div class="box c"></div>
      <div class="box d"></div>
      <div class="box e"></div>
      <div class="box f"></div>
    </div>