Как сделать так, чтобы все сообщения были одинакового размера в зависимости от размера экрана?

Внутри post div будет несколько рядов постов. Каждый ряд содержит максимум 4 поста. Поэтому, когда появляется 5 постов, возникает проблема с отзывчивостью. Первые 4 поста (первый ряд) будут реагировать на размер экрана, но 5-й пост (второй ряд) ничего не делает, потому что для 5-го поста осталось свободное место.

<div class="posts">
    {% if post %}
        {% for media in post %}
            {% if forloop.counter0|divisibleby:"4" %}
                <div class="post-row">
            {% endif %}
            <a id="post-wrapper" href="{% url 'sh-media' %}?pid={{media.pid}}">
                <div class="thumbnail-container">
                    <img src="{{ media.media_thumbnail.url }}" class="post-thumbnail">
                    <div class="gradient-overlay">
                        <h2 class="video-caption">{{ media.caption}}</h2>
                        <p class="video-description">{{ media.descr }}</p>
                    </div>
                </div>
            </a>
            {% if forloop.counter0|add:"1"|divisibleby:"4" or forloop.last %}
                </div>
            {% endif %}
        {% endfor %}
    {% endif %}
</div>

<style>
    .posts{ 
        display: flex;
        flex-direction: column;
        color: #fff;
        padding-top: 15px;
        justify-content: flex-start;
    }
    .post-row{
        display: flex:
    }
    #post-wrapper{
        margin: 20px 10px;
    }
</style>

Есть ли способ сделать так, чтобы все сообщения сохраняли одинаковый размер при изменении размера экрана?

Выходной HTML:

Вернуться на верх