{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}


<section class="section-{{ section.id }}-padding {% if section.settings.background == 'light' %} bg-cream{% else %} bg-gray-900{% endif %} text-gray-900" {% if section.settings.background == 'dark' %} data-header-theme="dark"{% endif %}>
  <div class="relative w-full h-full overflow-hidden px-6 md:px-9" data-component="carousel">
    <div class="flex justify-center">
      <div
        class="h-[26rem] md:h-[32rem] laptop:h-[42rem] whitespace-nowrap inline-block align-top"
        data-row=""
      >
        {% for block in section.blocks %}
        <div
          class="h-full w-auto px-6 md:px-9 inline-block align-top"
          data-draggable-block=""
        >
          <div class="relative w-full overflow-hidden h-full overflow-hidden">
            <div
              class="h-full"
              data-animation="parallax"
              data-speed="0.6"
              data-start="top bottom+=100"
              data-end="bottom top-=100"
            >
              <picture
                class="w-full h-auto flex w-full h-full overflow-hidden scale-[1.03]"
                style="--aspect: 1.2609649122807018"
                ><img
                  class="block w-full w-full h-full object-cover opacity-0"
                  data-component="lazyload"
                  data-src="{{ block.settings.image | img_url:'' }}"
                  alt="{{ block.settings.image.alt }}"
                  width="1150"
                  height="912"
                  draggable="false"
              ></picture>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    <div
      class="laptop:absolute laptop:inset-y-0 left-1/2 laptop:transform laptop:-translate-x-1/2 flex laptop:justify-between laptop:mt-0 laptop:px-18 items-center w-full justify-center mt-20 gap-x-12 pointer-events-none"
    >
      <button class="btn-rounded pointer-events-auto" type="button" data-control="prev">
        <span class="svg-wrapper" style="display:flex;justify-content: center;transform: rotate(180deg);">
          {{- 'icon-arrow.svg' | inline_asset_content -}}
        </span>
      </button
      ><button
        class="btn-rounded pointer-events-auto"
        type="button"
        data-control="next"
      >
        <span class="svg-wrapper" style="display:flex;justify-content: center;">
          {{- 'icon-arrow.svg' | inline_asset_content -}}
        </span>
      </button>
    </div>
  </div>
</section>

{% schema %}
{
  "name": "LP 15",
  "settings": [
    {
      "type": "select",
      "id": "background",
      "options": [
        {
          "value": "light",
          "label": "light"
        },
        {
          "value": "dark",
          "label": "dark"
        }
      ],
      "default": "light",
      "label": "background"
    },    
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }    
  ],
  "blocks": [
    {
      "type": "item",
      "name": "item",
      "settings": [        
        {
          "type": "image_picker",
          "id": "image",
          "label": "image"
        }           
      ]
    }    
  ],  
  "presets": [{"name": "LP 15"}]
}
{% endschema %}
