<section
  class="min-h-screen relative grid text-cream"
  data-animation="chained-content"
  style="--h: 5"
>
  <span
    class="w-full h-full bg-black opacity-0 absolute z-10 left-0 top-0 pointer-events-none"
    data-animation="fade"
    data-from="0"
    data-to="0.35"
    data-scrub=""
    data-ease="none"
    data-repeat=""
    data-start="bottom bottom"
    data-end="+=100%"
  ></span>
  <div
    class="sticky top-0 w-full h-screen col-start-1 row-start-1 row-end-1 col-span-1 -my-[100vh] !-my-[100svh]"
  >
    <picture
      class="w-full h-auto flex object-contain sticky left-0 top-0 hidden md:block"
      style="--aspect: 1.0850903614457832"
      data-background="desktop"
      ><img
        class="block w-full min-h-screen"
        src="{{ section.settings.pcbgimg |img_url:'' }}"
        alt="{{ section.settings.pcbgimg.alt }}"
        width="2882"
        height="2656"
        draggable="false"
    ></picture>
    <picture
      class="w-full h-auto flex object-contain sticky left-0 top-0 md:hidden"
      style="--aspect: 0.47058823529411764"
      data-background="mobile"
      ><img
        class="block w-full min-h-screen"
        src="{{ section.settings.mobbgimg |img_url:'' }}"
        alt="{{ section.settings.mobbgimg.alt }}"
        width="640"
        height="1360"
        draggable="false"
    ></picture>
  </div>
  <div
    class="w-full h-screen sticky top-0 grid p-12 laptop:p-18 col-start-1 col-span-1 row-start-1 row-end-1 laptop:pt-[9.4rem] -my-[100vh] !-my-[100svh]"
  >

    {% for block in section.blocks %}
    <div
      class="w-full h-full relative pt-50 pb-150 md:py-100 col-start-1 col-span-1 row-start-1 row-end-1 flex items-center"
      data-content-item=""
    >
      <h2
        class="index-2-heading mb-0 text-center h3 tracking-normal max-w-[42rem] lg:max-w-[56rem] laptop:max-w-[68rem] mx-auto w-full px-30 md:px-0"
        data-content-title=""
      >
        {{ block.settings.heading }}
      </h2>
    </div>
    {% endfor %}
    
    <div
      class="p-12 laptop:p-18 absolute left-0 bottom-0 w-full md:bottom-auto md:top-[7.6rem] md:left-auto md:w-auto md:right-0"
    >
      <div
        class="grid relative w-full bottom-0 right-0 bg-bronze bg-opacity-10 backdrop-blur-lg rounded overflow-hidden md:max-w-[23rem] laptop:max-w-[28rem] 2xl:max-w-[33.5rem]"
        data-content-description-parent=""
      >
        {% for block in section.blocks %}
        <div class="w-full p-20" data-content-description="">
          <div class="mb-20 md:mb-35">
            <div class="custom-icon custom-icon--large">
              <img
                class="w-full h-full object-contain"
                src="{{ block.settings.icon | img_url:'' }}"
                alt="{{ block.settings.icon.alt }}"
              >
            </div>
          </div>
          <div class="max-w-[21rem] md:max-w-[30rem] md:pr-0 reset-last">
            <p>{{ block.settings.text }}</p>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>

<style>
  #shopify-section-{{ section.id }} .index-2-heading{
    line-height:1.1;
  }   
</style>

{% schema %}
{
  "name": "LP 2",
  "blocks": [
    {
      "type": "icon",
      "name": "icon text",
      "settings": [
        {
          "type": "image_picker",
          "id": "icon",
          "label": "icon"
        },
        {
          "type": "textarea",
          "id": "heading",
          "label": "heading"
        },        
        {
          "type": "textarea",
          "id": "text",
          "label": "text"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "image_picker",
      "id": "pcbgimg",
      "label": "pc bg img"
    },   
    {
      "type": "image_picker",
      "id": "mobbgimg",
      "label": "mob bg img"
    }
  ],
  "presets": [{"name": "LP 2"}]
}
{% endschema %}
