<div class="{{ block.settings.visibility }}"
  {{ block.shopify_attributes }}
  style="--margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;--margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;"
>
  {% assign as_seen_on_padding = 'padding-top: '
    | append: block.settings.as_seen_on_padding_top
    | append: 'px; padding-bottom: '
    | append: block.settings.as_seen_on_padding_bottom
    | append: 'px;'
  %}

  {% assign as_seen_on_border = '' %}
  {% if block.settings.as_seen_on_border_top > 0 %}
    {% assign as_seen_on_border = as_seen_on_border
      | append: 'border-top: '
      | append: block.settings.as_seen_on_border_top
      | append: 'px solid '
      | append: block.settings.as_seen_on_border_color
      | append: ';'
    %}
  {% endif %}
  {% if block.settings.as_seen_on_border_bottom > 0 %}
    {% assign as_seen_on_border = as_seen_on_border
      | append: 'border-bottom: '
      | append: block.settings.as_seen_on_border_bottom
      | append: 'px solid '
      | append: block.settings.as_seen_on_border_color
      | append: ';'
    %}
  {% endif %}

  <div class="as-seen-on" style="{{ as_seen_on_padding }}{{ as_seen_on_border }}">
    <div class="pp-w-full pp-max-w-[650px] pp-relative">
      <div
        class="pp-w-full pp-flex pp-items-center pp-justify-center pp-px-20 pp-absolute pp-top-0 pp-right-0 pp-left-0 pp-w-[50%] pp-h-full pp-z-10 pp-mx-auto"
        style="background: {{ block.settings.as_seen_on_gradient }};"
      >
        <div
          class="body pp-text-center"
          style="color: {{ block.settings.as_seen_on_heading_color }};"
        >
          {{ block.settings.as_seen_on_heading }}
        </div>
      </div>
      <div class="pp-relative pp-flex pp-overflow-hidden pp-gap-2">
        <div class="pp-flex pp-items-center pp-justify-around pp-flex-shrink-0 pp-min-w-full pp-gap-4 pp-animate-partnersCarousel">
          {% for i in (1..6) %}
            {% assign image_key = 'as_seen_on_image' | append: i %}
            {% if block.settings[image_key] != blank %}
              <img
                class="pp-w-full pp-max-w-[100px] pp-h-fit pp-grayscale"
                src="{{ block.settings[image_key] | img_url: '400x' }}"
                alt="{{ block.settings[image_key].alt }}"
                width="{{ block.settings[image_key].width }}"
                height="{{ block.settings[image_key].height }}"
              >
            {% endif %}
          {% endfor %}
        </div>
        <div class="pp-flex pp-items-center pp-justify-around pp-flex-shrink-0 pp-min-w-full pp-gap-4 pp-animate-partnersCarousel">
          {% for i in (1..6) %}
            {% assign image_key = 'as_seen_on_image' | append: i %}
            {% if block.settings[image_key] != blank %}
              <img
                class="pp-w-full pp-max-w-[100px] pp-h-fit pp-grayscale"
                src="{{ block.settings[image_key] | img_url: '400x' }}"
                alt="{{ block.settings[image_key].alt }}"
                width="{{ block.settings[image_key].width }}"
                height="{{ block.settings[image_key].height }}"
              >
            {% endif %}
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .as-seen-on .pp-animate-partnersCarousel {
    animation: partnersCarousel {{ block.settings.sliderspeed }}s linear infinite;
  }
</style>