Перекрытие мобильных изображений на сайте Shopify

Question

В разрешении рабочего стола на этой домашней странице сайта хорошо отображаются квадраты, но на мобильном они все перекрываются.

https://antonjewellery.com/

I хочу, чтобы все они были шириной 100%, одна под другой!

Я пытался настроить высоту и т.д. c, но просто не могу понять, где проблема!

У кого-нибудь есть понимание, я уверен, что я упускаю что-то простое здесь!

.home-colledtion-product .product-item {
  width: 25%;
}

div#collection .container {
  width: 100%;
}

.home-colledtion-product .product-item.big-hero {
  width: 50%;
}

.product-grid .product-item:before {
  padding-top: 114%;
}

.home-colledtion-product .product-item.big-hero:before {
  padding-top: 56.4%;
}

.product-grid .product-item .info {
  margin: 0px;
  padding: 0px;
  border: 0px none;
  box-shadow: none;
  padding-right: 10px;
}

div#collection {
  background-color: #ffffff;
}

<div id="shopify-section-1585989110968" class="shopify-section" data-theme-editor-section-37783534708="{&quot;id&quot;:&quot;1585989110968&quot;,&quot;type&quot;:&quot;Two-column-image-content&quot;,&quot;disabled&quot;:false}">
  <div id="collection" class="home-colledtion-product">
    <div class="contaier">
      <div class="four-product-row">
        <div class="row product-grid" style="position: relative; height: 592.5px;">

          <div class="product-item" style="position: absolute; left: 0px; top: 0px;">
            <a style="border:none;" href="https://anton-jewellery.myshopify.com/collections/engagement">
              <div class="image">
                <img class="lazyautosizes lazyloaded" src="//cdn.shopify.com/s/files/1/0080/9775/9350/files/Engagement-banner_2048x.jpg?v=1586833017">
              </div>
            </a>
          </div>

          <div class="product-item" style="position: absolute; left: 0px; top: 197px;">
            <a style="border:none;" href="">
              <div class="image">
                <img class="lazyautosizes lazyloaded" src="//cdn.shopify.com/s/files/1/0080/9775/9350/files/dual-rings_2048x.jpg?v=1586298492">
              </div>
            </a>
          </div>

          <div class="product-item big-hero" style="position: absolute; left: 0px; top: 395px;">
            <a style="border:none;" href="">
              <div class="image">
                <img class="lazyautosizes lazyloaded" src="//cdn.shopify.com/s/files/1/0080/9775/9350/files/rings-side_01_2048x.jpg?v=1586299154">
              </div>
            </a>
          </div>

          <div class="grid-sizer"></div>
          <div class="gutter-sizer"></div>
        </div>
      </div>
    </div>
  </div>
</div>