<section class="pb-100 laptop:pb-250 relative bg-cream text-gray-900 z-2" data-header-theme="dark">
  <div
    class="relative pb-20 pt-40 md:pt-60 md:pb-35 laptop:pt-100 container md:grid md:grid-cols-12  md:gap-x-18"
  >
    <span class="absolute w-full h-1 bg-current opacity-20 top-0 left-0"></span>
    <div class="hidden md:block md:col-span-4 h3 m-0" data-animation="split">{{ section.settings.number }}</div>
    <h3 class="md:col-span-8 m-0" data-animation="split">{{ section.settings.heading }}</h3>
    <span
      class="absolute w-full h-1 bg-current opacity-20 bottom-0 left-0"
    ></span>
  </div>
  <div class="container pt-40 md:pt-130 grid gap-y-30 md:gap-y-18 md:grid-cols-12 md:gap-x-18 ">
    {% for block in section.blocks %}
    <a href="{{ block.settings.link }}" class="col-span-4">
      <div class="relative">
        <div
          class="relative rounded overflow-hidden bg-bronze bg-opacity-15"
          data-animation="moveUp"
        >
          {% if block.settings.image != blank %}
            <img
              class="rounded w-full h-full object-cover relative"
              data-component="lazyload"
              data-src="{{ block.settings.image | img_url:'' }}"
              alt="{{ block.settings.image.alt }}"
              width="auto"
              height="auto"
              draggable="false"
            >
          {% endif %}
          {% if block.settings.video != blank %}
          {{
            block.settings.video
            | video_tag:
              autoplay: true,
              loop: true,
              controls: false,
              muted: false,
              playsinline: true,
              class:'rounded w-full h-full object-cover relative aspect-[912/838]'
          }}
          {% endif %}
          <div
            class="absolute w-[3.4rem] h-[3.4rem] top-10 left-10 md:w-[3.6rem] md:h-[3.6rem] md:top-20 md:left-20 flex items-center justify-center leading-none flex-shrink-0  bg-gray-900 rounded-full"
            data-animation="scale"
            data-from="0"
            data-to="1"
            data-delay="0.2"
          >
            <span
              class="text-cream"
              >{{ block.settings.xuhao }}</span
            >
          </div>
        </div>
        <div class="pt-20" data-animation="fade">
          <div class="mb-15 uppercase text-xxs md:text-xs">
            <span
              class="inline-flex items-center"
              ><span
                class="w-6 h-6 rounded-full bg-current mr-5"
              ></span
              ><span>{{ block.settings.description }}</span></span
            >
          </div>
          <h4 class="m-0" data-animation="split">{{ block.settings.title }}</h4>
        </div>
      </div>
    </a>
    {% endfor %}
  </div>
</section>

{% schema %}
{
  "name": "LP 6",
  "blocks": [
    {
      "type": "item",
      "name": "item",
      "settings": [
        {
          "type": "url",
          "id": "link",
          "label": "link"
        },        
        {
          "type": "text",
          "id": "xuhao",
          "label": "序号"
        },  
        {
          "type": "image_picker",
          "id": "image",
          "label": "image"
        },          
        {
          "type": "video",
          "id": "video",
          "label": "video"
        },        
        {
          "type": "textarea",
          "id": "title",
          "label": "title"
        },        
        {
          "type": "textarea",
          "id": "description",
          "label": "description"
        }
      ]
    }    
  ],
  "settings": [
    {
      "type": "text",
      "id": "number",
      "label": "title number"
    },   
    {
      "type": "textarea",
      "id": "heading",
      "label": "heading"
    }  
  ],
  "presets": [{"name": "LP 6"}]
}
{% endschema %}
