<section class="relative grid -mb-[100vh] !-mb-[100svh] z-1" data-animation="star-mask">
  <div
    class="h-screen row-start-1 row-end-1 col-start-1 col-end-1 sticky top-0 flex items-center  overflow-hidden bg-cream text-gray-900"
  >
    <div class="py-10 relative">
      <div
        class="overflow-hidden whitespace-nowrap w-full uppercase font-medium text-[5rem] leading-none md:text-[14rem] laptop:text-[24rem] gap-x-[0.5em] flex laptop:leading-[0.8]"
        data-animation="marquee"
        data-start="top bottom"
        data-end="+=200%"
      >
        <div class="flex" data-marquee="0">{{ section.settings.marquee }}&nbsp;</div>
        <div class="flex" data-marquee="1">{{ section.settings.marquee }}&nbsp;</div>
      </div>
      <span class="h-1 absolute left-0 top-0 w-full bg-current opacity-20"></span
      ><span
        class="h-1 absolute left-0 bottom-0 w-full bg-current opacity-20"
      ></span>
    </div>
  </div>
  <div
    class="sticky top-0  w-full h-screen col-start-1 row-start-1 row-end-1 col-span-1 "
    data-mask-block=""
  >
    <picture
      class="w-full h-auto flex object-contain sticky left-0 top-0 md:hidden"
      style="--aspect: 0.32637474541751527"
      data-background="mobile"
      ><img
        class="block w-full min-h-screen opacity-0"
        data-component="lazyload"
        data-src="{{ section.settings.mobbgimg | img_url:'' }}"
        alt="{{ section.settings.mobbgimg.alt }}"
        width="641"
        height="1964"
        draggable="false"
    ></picture>
    <picture
      class="w-full h-auto flex object-contain sticky left-0 top-0 hidden md:block"
      style="--aspect: 1.3333333333333333"
      data-background="desktop"
      ><img
        class="block w-full min-h-screen opacity-0"
        data-component="lazyload"
        data-component="lazyload"
        data-src="{{ section.settings.pcbgimg | img_url:'' }}"
        alt="{{ section.settings.pcbgimg.alt }}"
        width="1440"
        height="1080"
        draggable="false"
    ></picture>
  </div>
  <div
    class="pt-[100vh] laptop:pt-[150vh] relative row-start-1 row-end-1 col-start-1 col-end-1 z-3"
  >
    <div
      class="h-[300vh] relative text-cream"
      data-min="{{ section.settings.number0 }}"
      data-max="{{ section.settings.number1 }}"
      data-counter-block=""
    >
      <div class="sticky top-0 h-screen flex items-center justify-center overflow-hidden">
        <span data-circle=""></span><span data-circle=""></span><span data-circle=""></span>
        <div class="w-full text-center">
          <p class="text-xxs md:text-xs uppercase mb-0">{{ section.settings.text1 }}</p>
          <p class="h2 flex justify-center mb-0 leading-[0.9]" data-counter-text="">
            <span class="font-mono">{{ section.settings.number0 }}m²</span>
          </p>
          <p class="mb-0 max-w-[15rem] mx-auto md:max-w-none">
            {{ section.settings.text2 }}
          </p>
        </div>
      </div>
    </div>
  </div>
</section>


{% schema %}
{
  "name": "LP 4",
  "settings": [
    {
      "type": "text",
      "id": "marquee",
      "label": "marquee"
    },    
    {
      "type": "image_picker",
      "id": "mobbgimg",
      "label": "mob bg img"
    },   
    {
      "type": "image_picker",
      "id": "pcbgimg",
      "label": "pc bg img"
    }, 
    {
      "type": "text",
      "id": "number0",
      "label": "number start"
    },    
    {
      "type": "text",
      "id": "number1",
      "label": "number end"
    },
    {
      "type": "text",
      "id": "text1",
      "label": "text top"
    },  
    {
      "type": "text",
      "id": "text2",
      "label": "text bottom"
    }   
  ],
  "presets": [{"name": "LP 4"}]
}
{% endschema %}
