St/responsive images

sections/hero.liquid

@@ -102,7 +102,7 @@
   assign sizes = '(min-width: 750px) ' | append: media_width_desktop | append: ', ' | append: media_width_mobile
   assign widths = '832, 1200, 1600, 1920, 2560, 3840'
   assign sizes_mobile = media_width_mobile
-  assign mobile_widths = '416, 600, 800, 1200, 1600'
+  assign mobile_widths = '165, 360, 535, 750, 1070, 1500'
   assign mobile_widths_array = mobile_widths | split: ', '
 
   assign fetch_priority = 'auto'

snippets/card-gallery.liquid

@@ -11,7 +11,7 @@
 {% liquid
   assign product = closest.product
   assign block_settings = block.settings
-  assign image_sizes = '(min-width: 750px) 50vw, 100vw'
+  assign image_sizes = '(min-width: 750px) 50vw, 50vw'
 
   # Check if product has badges and determine position
   assign has_badges = false
@@ -39,7 +39,7 @@
     assign image_sizes = sizes_attribute | strip
   elsif section.settings.columns and section.settings.layout_type != 'editorial'
     assign viewport_width = 100.0 | divided_by: section.settings.columns
-    assign sizes_attribute = '(min-width: 750px) [viewport_width]vw, 100vw' | replace: '[viewport_width]', viewport_width
+    assign sizes_attribute = '(min-width: 750px) [viewport_width]vw, 50vw' | replace: '[viewport_width]', viewport_width
     assign image_sizes = sizes_attribute | strip
   endif
 

snippets/product-media.liquid

@@ -18,7 +18,7 @@
 {%- enddoc -%}
 
 {% liquid
-  assign widths = widths | default: '240, 352, 832, 1200, 1600, 1920, 2560, 3840'
+  assign widths = widths | default: '165, 360, 535, 750, 1070, 1500, 1920, 2560, 3840'
   assign ref_image_to_transition = ''
   if settings.transition_to_main_product
     assign ref_image_to_transition = 'imagesToTransition[]'

snippets/resource-card.liquid

@@ -18,7 +18,7 @@
     assign ratio = image_aspect_ratio
   endif
   assign image_width = image_width | default: 1200
-  assign widths = '240, 352, 832, 1200'
+  assign widths = '165, 360, 535, 750, 1070, 1500'
   assign image_sizes = image_sizes | default: 'auto'
   assign single_thumbnail_collection = false
   if resource_type == 'collection' and collection_thumbnails != 'multiple'

snippets/util-autofill-img-size-attr.liquid

@@ -66,7 +66,7 @@
   endif
   assign sizes_attr = sizes_attr | append: '(min-width: ' | append: min_breakpoint | append: 'px) 50vw'
 
-  assign sizes_attr = sizes_attr | append: ', 100vw'
+  assign sizes_attr = sizes_attr | append: ', 50vw'
 
   # Echo the sizes attribute
   echo sizes_attr

snippets/util-product-media-sizes-attr.liquid

@@ -50,16 +50,16 @@
   if calculate_single_column
     # Default for carousel or single column grid (or first image in large_first_image mode)
     if section.settings.equal_columns == false
-      assign default_sizes = '(min-width: 750px) calc(100vw - 25rem - [gap_half]), 100vw' | replace: '[gap_half]', gap_half
+      assign default_sizes = '(min-width: 750px) calc(100vw - 25rem - [gap_half]), calc(100vw - 3rem)' | replace: '[gap_half]', gap_half
     else
-      assign default_sizes = '(min-width: 750px) calc(50vw - [gap_half]), 100vw' | replace: '[gap_half]', gap_half
+      assign default_sizes = '(min-width: 750px) calc(50vw - [gap_half]), calc(100vw - 3rem)' | replace: '[gap_half]', gap_half
     endif
   else
     # Default for two column grid - includes image gap and quarter section gap
     if section.settings.equal_columns == false
-      assign default_sizes = '(min-width: 750px) calc((100vw - 25rem) / 2 - [gap_quarter] - [image_gap_half]), 100vw' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
+      assign default_sizes = '(min-width: 750px) calc((100vw - 25rem) / 2 - [gap_quarter] - [image_gap_half]), calc(100vw - 3rem)' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
     else
-      assign default_sizes = '(min-width: 750px) calc(50vw / 2 - [gap_quarter] - [image_gap_half]), 100vw' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
+      assign default_sizes = '(min-width: 750px) calc(50vw / 2 - [gap_quarter] - [image_gap_half]), calc(100vw - 3rem)' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
     endif
   endif
 
@@ -116,7 +116,7 @@
       else
         assign medium_size = 'calc([medium_base] - [page_margin] - [gap_quarter] - [image_gap_half])' | replace: '[medium_base]', medium_base | replace: '[page_margin]', page_margin | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
       endif
-      assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], 100vw' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size
+      assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], calc(100vw - 3rem)' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size
     else
       # Single column calculation
       if block_settings.extend_media
@@ -130,7 +130,7 @@
       else
         assign medium_size = 'calc([medium_base] - [page_margin] - [gap_half] - [page_margin])' | replace: '[medium_base]', medium_base | replace: '[page_margin]', page_margin | replace: '[gap_half]', gap_half
       endif
-      assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], 100vw' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size
+      assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], calc(100vw - 3rem)' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size
     endif
   else
     # Use default sizes