{% if heading_title %}
  <div class="product-title">
    {% if product_list_title_style == Type_ProductListTitleStyle.Left %}
      <div class="flex flex-row nowrap-xs between-xs middle-xs">
        <h2 class="heading-product-list-title flex-1"
            style="{{ product_list_font_style == Type_ProductListFont.Google ? "font-family: #{product_list_font_google_style};" : "font-family: #{product_list_font_system_style};" }} {{ product_list_title_typhography_style == Type_ProductListTypography.Bold ? "font-weight: bold;" : null }} {{ product_list_title_typhography_style == Type_ProductListTypography.Normal ? "font-weight: normal;" : null }} {{ product_list_title_typhography_style == Type_ProductListTypography.Italic ? "font-weight: normal; font-style: italic;" : null }}">
          {{ heading_title }}
        </h2>
        {% if link %}
          <a href="{{ link }}" class="text-medium">Ver todos</a>
        {% endif %}
      </div>
      {% if heading_subtitle %}
        <h3 class="heading-product-list-subtitle top-margin-x-small"
            style="{{ product_list_font_style == Type_ProductListFont.Google ? "font-family: #{product_list_font_google_style};" : "font-family: #{product_list_font_system_style};" }} {{ product_list_subtitle_typhography_style == Type_ProductListTypography.Bold ? "font-weight: bold;" : null }} {{ product_list_subtitle_typhography_style == Type_ProductListTypography.Normal ? "font-weight: normal;" : null }} {{ product_list_subtitle_typhography_style == Type_ProductListTypography.Italic ? "font-weight: normal; font-style: italic;" : null }}">
          {{ heading_subtitle }}
        </h3>
      {% endif %}
    {% else %}
      <div class="flex flex-row nowrap-xs center-xs middle-xs">
        <div
          style="width: fit-content; {{ product_list_title_style == Type_ProductListTitleStyle.CenterWithLines ? ' max-width: calc(100% - 164px) ' : '' }}"
          class="rel">
          <h2
            class="heading-product-list-title flex-1 text-center {{ product_list_title_style == Type_ProductListTitleStyle.CenterWithLines ? ' product-title-with-lines ' : '' }}"
            style="{{ product_list_font_style == Type_ProductListFont.Google ? "font-family: #{product_list_font_google_style};" : "font-family: #{product_list_font_system_style};" }} {{ product_list_title_typhography_style == Type_ProductListTypography.Bold ? "font-weight: bold;" : null }} {{ product_list_title_typhography_style == Type_ProductListTypography.Normal ? "font-weight: normal;" : null }} {{ product_list_title_typhography_style == Type_ProductListTypography.Italic ? "font-weight: normal; font-style: italic;" : null }}">
            {{ heading_title }}
          </h2>
          {% if heading_subtitle %}
            <h3 class="heading-product-list-subtitle top-margin-x-small text-center"
                style="{{ product_list_font_style == Type_ProductListFont.Google ? "font-family: #{product_list_font_google_style};" : "font-family: #{product_list_font_system_style};" }} {{ product_list_subtitle_typhography_style == Type_ProductListTypography.Bold ? "font-weight: bold;" : null }} {{ product_list_subtitle_typhography_style == Type_ProductListTypography.Normal ? "font-weight: normal;" : null }} {{ product_list_subtitle_typhography_style == Type_ProductListTypography.Italic ? "font-weight: normal; font-style: italic;" : null }}">
              {{ heading_subtitle }}
            </h3>
          {% endif %}
        </div>
      </div>
    {% endif %}
  </div>
{% endif %}
