{% if block.settings.headline != blank %}
      <h3 class="sizing-chart__title center {{ block.settings.heading_sizesize }}" style="margin-top: 20px;margin-bottom:10px;">
        {{ block.settings.headline }}
      </h3>
    {% endif %}
    {% if block.settings.top_image != blank %}
      <div class="sizing-chart__top-image">
        {%- capture sizes -%}
          (min-width: 750px) 800px / 2), calc((100vw - 50px))
        {%- endcapture -%}
        {{
          block.settings.top_image
          | image_url: width: 1500
          | image_tag: loading: 'lazy', sizes: sizes, widths: '165, 360, 535, 750, 1070, 1250, 1500'
        }}
      </div>
    {% endif %}
    <table class="sizing-chart-table">
      {% if block.settings.table_header_content != blank %}
        {% assign columns = block.settings.table_header_content | split: ',' %}
        <thead>
          <tr>
            {% for column in columns %}
              <th class="sizing-chart-table__th color-{{ block.settings.table_header_color_scheme }}" align="center">
                {{ column | strip }}
              </th>
            {% endfor %}
          </tr>
        </thead>
      {% endif %}
      <tbody>
        {% assign rows = block.settings.table_content | split: '</p><p>' %}
        {% for row in rows %}
          <tr>
            {% assign columns = row | remove: '<p>' | remove: '</p>' | split: ',' %}
            {% for column in columns %}
              <td class="sizing-chart-table__td" align="center">
                {{ column | strip }}
              </td>
            {% endfor %}
          </tr>
        {% endfor %}
      </tbody>
    </table>
    {% if block.settings.caption != blank %}
      <p
        class="sizing-chart__caption {{ block.settings.caption_alignment }}"
        style="--text-size:{{ block.settings.caption_size }};--text-color:{{ block.settings.caption_color }};"
      >
        {{ block.settings.caption }}
      </p>
    {% endif %}
    {% if block.settings.bottom_image != blank %}
      <div class="sizing-chart__top-image">
        {%- capture sizes -%}
          (min-width: 750px) 800px / 2), calc((100vw - 50px))
        {%- endcapture -%}
        {{
          block.settings.bottom_image
          | image_url: width: 1500
          | image_tag: loading: 'lazy', sizes: sizes, widths: '165, 360, 535, 750, 1070, 1250, 1500'
        }}
      </div>
    {% endif %}