<section class="bg-cream text-gray-900" 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.xuhao }}</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 grid pt-40 pb-100 laptop:pt-80 laptop:pb-250 gap-12 md:grid-cols-12 laptop:gap-18"
  >
    {% for block in section.blocks %}
    <div class="md:col-span-6">
      <div
        class="relative h-full lg:h-[80vh] aspect-square lg:aspect-none lg:w-full group overflow-hidden rounded"
      >
        <a
          href="{{ block.settings.link }}"
          class="absolute h-full w-full  top-0 left-0 "
          data-animation="scale"
          data-from="1.05"
          data-to="1"
        >
          <picture
            class="w-full h-auto flex h-full w-full group-hover:scale-105 transition-transform duration-700"
            style="--aspect: 1"
            ><img
              class="block w-full  w-full h-full object-cover  opacity-0"
              data-component="lazyload"
              data-src="{{ block.settings.image | img_url:'' }}"
              alt="{{ block.settings.image.alt }}"
              width="1386"
              height="1386"
              draggable="false"
            >
          </picture>
        </a>
        <span
          class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-900 to-transparent opacity-50"
        ></span>
        <div class="p-12 flex h-full flex-col laptop:p-18 relative">
          <div class="mb-20" data-animation="moveUp">
            <button 
              class="inline-flex items-center text-center py-10 px-20 backdrop-blur text-cream border-2 border-cream border-opacity-10 hover:opacity-70 transition-opacity duration-300"
              type="button"
            >
              {{ block.settings.label }}
            </button>
          </div>
          <div class="max-w-[70%] mt-auto laptop:max-w-[40rem] text-cream">
            <h4 class="mb-20 laptop:mb-30" data-animation="split">{{ block.settings.title }}</h4>
            <div data-animation="split">{{ block.settings.text }}</div>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</section>

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