Product detail featured image zoom resizing on mobile

[mumair]

Dear friends,

I want to resize the zoom level of the product detail's main featured image, however, I am able to do so for the desktop size by editing the liquid code on the relevant snippet file "product-template-variables.liquid" but I do not understand its setting for the mobile viewport.

Please note that on mobile it has the same zoom level that I set for the desktop or in general for example, if I have a 390px mobile viewport then the 800px image zoom level of the desktop is definitely too much.

Here is the link to the relevant page of the store to have an idea:
natyheals.com

Here is the code from the snippet (product-template-variables.liquid) file that can change the zoom size:

{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign product_thumb_size = '180x' -%}
{%- assign product_zoom_size = '800x800' -%}
{%- assign product_image_size = '620x' -%}

{% case image_container_width %}
  {% when 'small' %}
    {%- assign product_image_width = 'medium-up--two-fifths' -%}
    {%- assign product_description_width = 'medium-up--three-fifths' -%}
    {%- assign product_image_size = '480x' -%}
  {% when 'medium' %}
    {%- assign product_image_width = 'medium-up--one-half' -%}
    {%- assign product_description_width = 'medium-up--one-half' -%}
    {%- assign product_image_size = '620x' -%}
  {% when 'large' %}
    {%- assign product_image_width = 'medium-up--three-fifths' -%}
    {%- assign product_description_width = 'medium-up--two-fifths' -%}
    {%- assign product_image_size = '740x' -%}
{% endcase %}

<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: product_image_size }}">