모바일 회전시 썸네일 이미지 작아지는 문제

모바일 가로로 회전하면 이미지가 커졌다가 다시 세로로 회전하여 돌아오면

썸네일 이미지가 처음보다 아주 크게 작아지는 문제는 어떻게 해결해야 할까요

아래 CSS소스에서 어디를 고쳐야 하는지 알려주세요

제 사이트는 e-madeinkorea.net 입니다

@media (max-width: 767px) {

.woocommerce ul.products li {
    overflow: hidden;
}

.woocommerce ul.products li.product a img {
      width: 185px;
      height: 185px;
        background-color:white;
        object-fit: contain;
        transform: scale(2.0);
      clip-path: inset(25%);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {

.woocommerce ul.products li {
    overflow: hidden;
}

.woocommerce ul.products li.product a img {
      width: 250px;
      height: 250px;
        background-color:white;
        object-fit: contain;
        transform: scale(3.0);
      clip-path: inset(32%);
  }
}