I also added this to my bgset.liquid file. (not sure if it matters, just trying everything I can think of)
{%- if image != blank -%}
{% if image.width > 180 %}{{ image | img_url: '180x' }} 180w {{ 180 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 360 %}{{ image | img_url: '360x' }} 360w {{ 360 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 540 %}{{ image | img_url: '540x' }} 540w {{ 540 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 720 %}{{ image | img_url: '720x' }} 720w {{ 720 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 900 %}{{ image | img_url: '900x' }} 900w {{ 900 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 1080 %}{{ image | img_url: '1080x' }} 1080w {{ 1080 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 1296 %}{{ image | img_url: '1296x' }} 1296w {{ 1296 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 1512 %}{{ image | img_url: '1512x' }} 1512w {{ 1512 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 1728 %}{{ image | img_url: '1728x' }} 1728w {{ 1728 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 1950 %}{{ image | img_url: '1950x' }} 1950w {{ 1950 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 2100 %}{{ image | img_url: '2100x' }} 2100w {{ 2100 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 2260 %}{{ image | img_url: '2260x' }} 2260w {{ 2260 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 2450 %}{{ image | img_url: '2450x' }} 2450w {{ 2450 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 2700 %}{{ image | img_url: '2700x' }} 2700w {{ 2700 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 3000 %}{{ image | img_url: '3000x' }} 3000w {{ 3000 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 3350 %}{{ image | img_url: '3350x' }} 3350w {{ 3350 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 3750 %}{{ image | img_url: '3750x' }} 3750w {{ 3750 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{% if image.width > 4100 %}{{ image | img_url: '4100x' }} 4100w {{ 4100 | divided_by: image.aspect_ratio | round }}h,{% endif %}
{{ image | img_url: 'master' }} {{ image.width }}w {{ image.height }}h
{%- endif -%}
{%- if mobile_image != blank -%}
{% if mobile_image.width > 180 %}{{ mobile_image | img_url: '180x' }} 180w {{ 180 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
{% if mobile_image.width > 360 %}{{ mobile_image | img_url: '360x' }} 360w {{ 360 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
{% if mobile_image.width > 540 %}{{ mobile_image | img_url: '540x' }} 540w {{ 540 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
{% if mobile_image.width > 720 %}{{ mobile_image | img_url: '720x' }} 720w {{ 720 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
{% if mobile_image.width > 900 %}{{ mobile_image | img_url: '900x' }} 900w {{ 900 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
{% if mobile_image.width > 1080 %}{{ mobile_image | img_url: '1080x' }} 1080w {{ 1080 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
{% if mobile_image.width > 1296 %}{{ mobile_image | img_url: '1296x' }} 1296w {{ 1296 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
{% if mobile_image.width > 1512 %}{{ mobile_image | img_url: '1512x' }} 1512w {{ 1512 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
{% if mobile_image.width > 1728 %}{{ mobile_image | img_url: '1728x' }} 1728w {{ 1728 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
{% if mobile_image.width > 1950 %}{{ mobile_image | img_url: '1950x' }} 1950w {{ 1950 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
{% if mobile_image.width > 2100 %}{{ mobile_image | img_url: '2100x' }} 2100w {{ 2100 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
{% if mobile_image.width > 2260 %}{{ mobile_image | img_url: '2260x' }} 2260w {{ 2260 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
{% if mobile_image.width > 2450 %}{{ mobile_image | img_url: '2450x' }} 2450w {{ 2450 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
{% if mobile_image.width > 2700 %}{{ mobile_image | img_url: '2700x' }} 2700w {{ 2700 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
{% if mobile_image.width > 3000 %}{{ mobile_image | img_url: '3000x' }} 3000w {{ 3000 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
{% if mobile_image.width > 3350 %}{{ mobile_image | img_url: '3350x' }} 3350w {{ 3350 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
{% if mobile_image.width > 3750 %}{{ mobile_image | img_url: '3750x' }} 3750w {{ 3750 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
{% if mobile_image.width > 4100 %}{{ mobile_image | img_url: '4100x' }} 4100w {{ 4100 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
{{ mobile_image | img_url: 'master' }} {{ mobile_image.width }}w {{ mobile_image.height }}h
{%- endif -%}
And I {think} I’ve narrowed it down to the top portion of the hero.liquid file. Whenever I remove the middle if’s it helps with sizing, but not completely. Also, I added the style to the theme.scss.liquid file instead of the html.
{%- if section.settings.hero_layout == 'full_width' and section.settings.hero_size == 'adapt' -%}
{%- if section.settings.image.aspect_ratio == blank -%}
{%- assign min_aspect_ratio = 2.0 -%}
{%- else -%}
{%- assign min_aspect_ratio = section.settings.image.aspect_ratio -%}
{%- endif -%}
{%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%}
{%- style -%}
.hero-{{ section.id }} {
height: {{- wrapper_height -}}vw !important;
}
{%- endstyle -%}
{%- endif -%}