Bootstrap: reduce horizontal spacing between cards when using card-columns class

I’m attempting to render several rows of Bootstrap cards, with each row having two cards side-by-side.

My code is working, but there is lots of space between the cards when the screen is expanded.

Here is the code:

HTML (uses Django template)

{% block body %}
    <h2>{{ title }}</h2>

    <div class="container-fluid">

    <div class="card-columns mx-auto col-10">

    {% for entry in entries %}

    <div class="mx-auto card h-100 mb-3" style="max-width: 480px">
        <a href="{% url 'listing' listing.id %}">
            <img class="card-img-top" src="{{ entry.image.url }}" alt="{{ entry.title }}">
        </a>
            <div class="card-body">
                <h5 class="card-title">{{ entry.title }}</h5>    
                <p class="card-text">{{ entry.description }}</p>

            </div>
    </div>
        

    {% empty %}
        No content found.
    {% endfor %}
    </div>
</div>

{% endblock %}

CSS:

body  {
    min-height: 100vh;
    background-color: #ecf1f4;
}

.card-columns {
    column-count: 2;
    column-gap: 20px;  /* does not affect the spacing! */
    justify-content: center;
    flex-wrap: wrap;
    display: flex;
 
}

@media (max-width: 500px) {
    .card-columns {
        column-count: 1;
    }
}

The column-gap does not affect the spacing. Is this being overridden by something else? Or, is there another mistake, perhaps?

Here is an example:

If this is not possible to implement with card-columns, then I would be open to another approach.

Thanks in advance for any advice you can give this CSS newbie!