<section
  class="bg-cream text-gray-900 container pt-40 md:pt-0 pb-60 md:pb-0 laptop:pb-100"
  data-header-theme="dark"
>
  <div class="relative" data-animation="stacked-content" style="--h: 4">
    <div class="sticky flex flex-col top-60 md:top-0 md:pt-130 h-available md:h-screen">
      <h2 class="h3 pr-40 mb-20 md:hidden flex-shrink-0" data-animation="split">{{ section.settings.heading }}</h2>
      <div
        class="flex flex-col flex-grow md:grid md:grid-cols-12 md:gap-x-12 laptop:gap-x-18 md:sticky  md:top-0 col-start-1 col-end-1 row-start-1 row-end-1 pb-20 md:pb-80"
      >
        <div class="md:col-span-4 pr-1/3 lg:pr-40 md:pr-30 flex flex-col">
          <p class="h3 mb-20 hidden md:block" data-animation="split">{{ section.settings.heading }}</p>
          <div class="mt-auto grid items-start md:items-end">
            
            {% for block in section.blocks %}
            <div
              class="col-start-1 col-end-1 row-start-1 row-end-1 lg:pr-1/3"
              data-animation="fade"
              data-content=""
            >
              <p class="h3 mb-20" data-letter="">{{ block.settings.xuhao }}</p>
              <h3 class="mb-15 h4" data-title="">{{ block.settings.title }}</h3>
              <div data-description="">{{ block.settings.text }}</div>
            </div>
            {% endfor %}
            
          </div>
        </div>
        <div
          class="md:col-span-8 mb-20 md:mb-0 md:h-full order-first md:order-last flex-grow"
        >
          <div
            class="aspect-[298/260] h-full md:aspect-auto md:h-full w-full overflow-hidden relative"
          >
            {% for block in section.blocks %}
            <div class="absolute left-0 top-0 w-full h-full">
              <div class="absolute left-0 top-0 w-full h-full">
                <picture
                  class="w-full h-auto flex w-full h-full"
                  style="--aspect: 1.1481481481481481"
                  data-large-image=""
                  ><img
                    class="block w-full w-full h-full"
                    src="{{ block.settings.bgimg | img_url:'' }}"
                    alt="{{ block.settings.bgimg.alt }}"
                    width="1860"
                    height="1620"
                    draggable="false"
                ></picture>
              </div>
              <div class="pt-30 px-30 h-full md:pt-60 md:px-60 laptop:pt-90">
                <div
                  class="flex flex-col items-center justify-end h-full relative z-2"
                >
                  <div
                    class="relative aspect-[406/601] max-w-[40.6rem] max-h-full w-auto"
                  >
                    <svg
                      class="w-full h-auto relative z-2"
                      width="406"
                      height="601"
                      viewbox="0 0 406 601"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <g clip-path="url(#clip0_1175_627)">
                          <path
                              d="M389 745.5H397.5V737V58C397.5 30.6619 375.338 8.5 348 8.5H58C30.6619 8.5 8.5 30.6619 8.5 58V737V745.5H17H389Z"
                              stroke="black" stroke-width="17"></path>
                          <path
                              d="M102 17H303V24C303 37.2548 292.255 48 279 48H126C112.745 48 102 37.2548 102 24V17Z"
                              fill="black"></path>
                      </g>
                      <defs>
                          <clippath id="clip0_1175_627">
                              <rect width="406" height="601" fill="white">
                              </rect>
                          </clippath>
                      </defs>
                    </svg>
                    <div class="absolute left-0 top-0 w-full h-full z-1">
                      <picture
                        class="w-full h-auto flex w-full h-full object-cover overflow-hidden absolute left-0 top-0 rounded-t-[15%]"
                        style="--aspect: 0.6755407653910149"
                        data-device-image=""
                        ><img
                          class="block w-full w-full h-full object-cover"
                          src="{{ block.settings.image | img_url:'' }}"
                          alt="{{ block.settings.image.alt }}"
                          width="812"
                          height="1202"
                          draggable="false"
                      ></picture>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

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