<section class="relative text-gray-900 bg-cream" id="features" data-header-theme="dark">
  <div
    class="bg-cream"
    data-animation="parallax"
    data-start="bottom bottom"
    data-end="bottom top"
    data-speed="1.5"
    data-start-at="0"
    data-starting-from="1280"
  >
    <span
      class="w-full h-full bg-cream 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="min-h-screen relative grid" data-animation="chained-lamp" style="--h: 5">
      
      <div
        class="flex flex-col h-screen sticky top-0 w-full  laptop:p-18 overflow-hidden bg-cream col-start-1 col-span-1 row-start-1 row-end-1"
        data-content-item=""
        style="z-index: 4;"
      >
        <div class="flex-grow flex flex-col h-0">
          <div
            class="absolute left-0 bottom-0 w-auto h-full relative basis-[100%] h-0 width-full pt-30 md:w-auto md:pt-0 md:h-auto md:flex md:items-end md:max-w-[75%] md:-left-[10%] laptop:left-0 md:absolute lg:max-w-[55rem]"
            data-image-container=""
          >
            <span class="lamp-gradient absolute"></span
            ><img
              class="h-full w-auto relative object-contain px-10 md:px-0 w-full md:w-auto object-bottom md:object-right-bottom md:min-h-0 relative"
              src="{{ section.settings.image1 | img_url:'' }}"
              data-image=""
              alt="{{ section.settings.image1.alt }}"
            >
          </div>
        </div>
      </div>
      <div
        class="flex flex-col h-screen sticky top-0 w-full  laptop:p-18 overflow-hidden bg-cream col-start-1 col-span-1 row-start-1 row-end-1"
        data-content-item=""
        style="z-index: 3;"
      >
        <div class="flex-grow flex flex-col h-0">
          <div
            class="absolute left-0 bottom-0 w-auto h-full relative basis-[100%] h-0 width-full md:-left-[20%] lg:left-0 md:absolute md:w-auto laptop:max-w-full md:pt-0 md:h-full"
            data-image-container=""
          >
            <span class="lamp-gradient absolute"></span
            ><img
              class="h-full w-auto relative h-full object-cover md:object-contain object-bottom md:object-right"
              src="{{ section.settings.image2 | img_url:'' }}"
              data-image=""
              alt="{{ section.settings.image2.alt }}"
            >
          </div>
        </div>
      </div>
      <div
        class="flex flex-col h-screen sticky top-0 w-full  laptop:p-18 overflow-hidden bg-cream col-start-1 col-span-1 row-start-1 row-end-1"
        data-content-item=""
        style="z-index: 2;"
      >
        <div class="flex-grow flex flex-col h-0">
          <div
            class="absolute left-0 bottom-0 w-auto h-full absolute left-0 top-0 w-full h-full laptop:max-w-[83.7rem] md:-left-[20%] lg:left-0"
            data-image-container=""
          >
            <span class="lamp-gradient absolute"></span
            ><img
              class="h-full w-auto relative h-full max-w-none object-cover object-right-bottom md:object-right laptop:transform-none"
              src="{{ section.settings.image3 | img_url:'' }}"
              data-image=""
              alt="{{ section.settings.image3.alt }}"
            >
          </div>
        </div>
      </div>
      <div
        class="flex flex-col h-screen sticky top-0 w-full  laptop:p-18 overflow-hidden bg-cream col-start-1 col-span-1 row-start-1 row-end-1"
        data-content-item=""
        style="z-index: 1;"
      >
        <div class="flex-grow flex flex-col h-0">
          <div
            class="absolute left-0 bottom-0 w-auto h-full -mt-12 md:mt-0 relative basis-[100%] h-0 width-full md:absolute md:w-auto md:pt-0 md:h-full md:max-w-full laptop:max-w-[66.8rem]"
            data-image-container=""
          >
            <span class="lamp-gradient absolute"></span
            ><img
              class="h-full w-auto relative object-contain object-top"
              src="{{ section.settings.image4 | img_url:'' }}"
              data-image=""
              alt="{{ section.settings.image4.alt }}"
            >
          </div>
        </div>
      </div>
      <div
        class="col-start-1 col-span-1 row-start-1 row-end-1 h-screen flex items-end md:items-start w-full top-0 sticky z-10 md:justify-end"
      >
        <div class="absolute z-2 opacity-0 laptop:opacity-100" data-circle-icon="">
          <svg
            class="w-50 h-50 laptop:w-[7.3rem] laptop:h-[7.2rem] rotated-icon"
            width="73"
            height="72"
            viewbox="0 0 73 72"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path class="opacity-20"
                d="M71.5 36C71.5 16.9462 56.0538 1.5 37 1.5V0.5C56.6061 0.5 72.5 16.3939 72.5 36C72.5 55.6061 56.6061 71.5 37 71.5V70.5C56.0538 70.5 71.5 55.0538 71.5 36Z"
                fill="currentColor"></path>
            <path class="opacity-20"
                d="M20.7361 5.56636C9.88155 11.3794 2.5 22.8281 2.5 36C2.5 49.172 9.88155 60.6207 20.7361 66.4337L20.2639 67.3152C9.09741 61.3351 1.5 49.5552 1.5 36C1.5 22.4449 9.09741 10.665 20.2639 4.68481L20.7361 5.56636Z"
                fill="currentColor"></path>
            <path class="half-circle-right"
                d="M37 71C56.33 71 72 55.33 72 36C72 16.67 56.33 1 37 1"
                stroke="currentColor"></path>
            <path class="half-circle-left"
                d="M20.5 5.12561C9.48948 11.0222 2 22.6365 2 36C2 49.3636 9.48948 60.9779 20.5 66.8745"
                stroke="currentColor"></path>
            <path class="inner-square"
                d="M47.5 22V22C49.433 22 51 23.567 51 25.5V25.5M26.5 22V22C24.567 22 23 23.567 23 25.5V25.5M47.5 50V50C49.433 50 51 48.433 51 46.5V46.5M26.5 50V50C24.567 50 23 48.433 23 46.5V46.5"
                stroke="currentColor"></path>
            <circle cx="37" cy="36" r="7" fill="currentColor"></circle>
            <circle cx="2" cy="36" r="2" fill="currentColor"></circle>
          </svg>
        </div>
        <svg
          class="absolute path-connection -z-1 pointer-events-none"
          width="449"
          height="247"
          viewbox="0 0 449 247"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          data-connection-path=""
        >
          <path d="M1 1L309 246L449 246" stroke="currentColor" stroke-opacity="0.2"
              stroke-dasharray="6 6"></path>
        </svg>
        <div
          class="p-12 laptop:p-18 relative 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>
              <h3 class="h4 mb-10">{{ block.settings.heading }}</h3>
              <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>
    </div>
  </div>
</section>

<style>
  #shopify-section-{{ section.id }} [data-animation=chained-lamp] [data-content-item]:first-child .lamp-gradient{
    background:{{ section.settings.shadow1 }};
  }
  #shopify-section-{{ section.id }} [data-animation=chained-lamp] [data-content-item]:nth-child(2) .lamp-gradient{
    background:{{ section.settings.shadow2 }};
  }  
  #shopify-section-{{ section.id }} [data-animation=chained-lamp] [data-content-item]:nth-child(3) .lamp-gradient{
    background:{{ section.settings.shadow3 }};
  }
</style>

{% schema %}
{
  "name": "LP 3",
  "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": "image1",
      "label": "image 1"
    },   
    {
      "type": "color_background",
      "id": "shadow1",
      "label": "shadow 1"
    },     
    {
      "type": "image_picker",
      "id": "image2",
      "label": "image 2"
    }, 
    {
      "type": "color_background",
      "id": "shadow2",
      "label": "shadow 2"
    },      
    {
      "type": "image_picker",
      "id": "image3",
      "label": "image 3"
    },  
    {
      "type": "color_background",
      "id": "shadow3",
      "label": "shadow 3"
    },      
    {
      "type": "image_picker",
      "id": "image4",
      "label": "image 4"
    }    
  ],
  "presets": [{"name": "LP 3"}]
}
{% endschema %}
