How to align the cards to the width of the image?

Question

css

There are such cards with pictures

. I want the contents of the card to be aligned to the width of the picture, so that there is no white space between the frame and the picture, how can I do this? Now the code is like this

<div class="card-columns">
        {% for product in products %}
        <div class="card">
          {% if product.image   %}
          <div class="img-wrap">   
          <img   style="max-width: 360px;" src="{{ product.image.url }}"  alt="тут малоб бути зображення" /> <br/><br/>
        </div>
          {% endif %}
          <div class="card-body">
            {% if user.is_authenticated %}
            <div style="text-align: center;">
              <a style=" color: black; margin-right: 5px; " href="{% url 'product_edit' pk=product.pk %}">
              <i class="fas fa-pencil-alt"></i></a>
              <a style=" color: black;" href="{% url 'product_remove' pk=product.pk %}"><i class="far fa-trash-alt"></i></a>
            </div>
            <br><br>
            {% endif %}
            <h2 class="posts-post-title"> {{product.name }} </h2> 
            <p class="card-text">{{product.description|linebreaksbr|truncatewords_html:20 }}</p>
            <p class="card-text"> <a href="{% url 'product' pk=product.pk %}"><p>Переглянути</p></a></p>
            <button style="background-color: white; border: none;" type="submit" class="button"><i  style="color:#f76a6a;  font-size: 20px" class="fas fa-heart basket_add_pr" data-product_name="{{product.name}}" ></i></button>
          </div>
        </div>
        {% endfor %}
      </div>

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}

.img-wrap{
  display:block;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
      width: 100%;
    height: auto;
    margin: auto;
}