Как сбросить значение src при закрытии модального окна?

Question

[LenaOlegovna]

Добрый день, помогите пожалуйста решить задачу. В интернет магазине на 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 fade modal-view" id="pp-item-{{ product.product_id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <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>
  </div>
</div>

И скрипт:

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

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