<section class="overflow-hidden relative py-100 md:pt-40 md:pb-120 laptop:pb-250 text-cream">
  <div class="absolute left-0 top-0 w-full h-full pointer-events-none bg-gray-900 -z-1">
    <div class="relative w-full overflow-hidden h-full overflow-hidden">
      <div
        class="h-full"
        data-animation="parallax"
        data-speed="3"
        data-start="top bottom+=100"
        data-end="bottom top-=100"
      >
        <picture
          class="w-full h-auto flex h-full stars-bg"
          style="--aspect: 0.927237604636188"
          ><img
            class="block w-full h-full opacity-0"
            data-component="lazyload"
            data-src="{{ section.settings.bgimage | img_url:'' }}"
            alt="{{ section.settings.bgimage.alt }}"
            width="2880"
            height="3106"
            draggable="false"
          >
        </picture>
      </div>
    </div>
  </div>
  <div
    class="relative"
    data-animation="parallax"
    data-start="top center-=200"
    data-end="+=100%"
    data-scroll-target="this"
    data-start-at="0"
    data-speed="2"
  >
    <h2
      class="text-center mb-0 px-40 mx-auto leading-none title-quiet"
      data-animation="split"
      data-duration="2"
    >
      {{ section.settings.title }}
    </h2>
  </div>
  <div
    class="flex justify-center px-30 relative md:-mt-10 laptop:-mt-40"
    data-animation="moveUp"
    data-from="200"
  >
    <div
      class="w-full"
      data-animation="parallax"
      data-start="top center-=200"
      data-end="+=100%"
      data-scroll-target="this"
      data-start-at="0"
      data-speed="3"
    >
      <picture
        class="w-full h-auto flex max-w-[61rem] mx-auto w-full relative z-1"
        style="--aspect: 0.7950065703022339"
        ><img
          class="block w-full w-full  opacity-0"
          data-component="lazyload"
          data-src="{{ section.settings.image | img_url:'' }}"
          alt="{{ section.settings.image.alt }}"
          width="1210"
          height="1522"
          draggable="false"
      ></picture>
    </div>
  </div>
</section>

{% schema %}
{
  "name": "LP 7",
  "settings": [
    {
      "type": "image_picker",
      "id": "bgimage",
      "label": "bg image"
    },   
    {
      "type": "textarea",
      "id": "title",
      "label": "title"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "image"
    }    
  ],
  "presets": [{"name": "LP 7"}]
}
{% endschema %}
