Сброс модального окна при закрытии

помогите пожалуйста решить задачу. В интернет магазине на ocstore 3.02.0, на главной странице есть несколько товаров. Каждый товар открывается в модальном окне быстрого просмотра (на bootstrap 5). В каждом окне есть галлерея фотографий с миниатюрами, при клике по миниатюре, главное изображение меняется на изображение миниатюры. В результате если закрыть модальное окно первого товара, и перейти к следующему, то главное изображение сохраняется из первого окна, и так для всех остальных товаров. Как сделать так, чтобы при закрытии модального окна, значение сбрасывалось на начальное?

Вот код кнопки открытия модального окна:

<a href="#" data-bs-toggle="modal" data-bs-target="#pp-item-{{ product.product_id }}"><i class="fas fa-eye"></i></a>

Модальное окно:

<div class="modal-dialog modal-lg">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel"><a href="{{ product.href }}">{{ product.name }}</a></h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="modal-body">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">                
            <ul class="thumbnails list-unstyled clearfix">                    
                <li class="thumb-main text-center">
                    <a class="thumbnail"><img id="main" class="main" src="{{ product.thumb }}" alt="{{ product.name }}"></a>
                </li>
                {% if product.images %}
            
                {% for image in product.images %}
                    <li class="thumb-additional">
                        <a class="thumbnail"><img class="min-img" src="{{ image.thumb }}" alt="{{ product.name }}"></a>
                    </li>
                {% endfor %}
                {% endif %}
            </ul>            
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
            <div class="product-price">
                <span>{{ product.special }}</span>
                <span class="old-price">{{ product.price }}</span>
            </div>
            <p>{{ product.description }}</p>               
        </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" onclick="cart.add('{{ product.product_id }}');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>                       
  </div>
</div>

Скрипт:

$(".min-img").on("click", function(){
$(".main").attr("src", $(this).attr("src"));    
});
$('.modal-view').on('hidden.bs.modal', function () {
// не могу додумать что тут написать
});

Не судите строго, буду благодарна за любую помощь.