
<div class="container-desktop-vertical-margin" {% render 'overwrite-theme-style', desktop_settings: section.settings %}>
<div class="container-mobile-vertical-margin" {% render 'overwrite-theme-style', settings: section.settings %}>
<div class="container">
<div class="link-list hide-scrollbar">

    {%- for block in section.blocks -%}
        <a href="{{ block.settings.link.url }}" class="link-list-entry no-link-style">
            <div style="background-color: {{ section.settings.background_color_links | color_to_hex }}; height: {{ block.settings.image_width_desktop }}px; width: {{ block.settings.image_width_desktop }}px">
                {% render 'image', 
                    image: block.settings.image,
                    placeholder_padding_vertical: 5,
                    placeholder_padding_horizontal: 5 %}
            </div>
            <span class="font-heading">{{ block.settings.label }}</span>
        </a>
    {%- endfor -%}
    
</div>


<div class="link-list-mobile swiper" data-slide-per-view="{{ section.settings.per_view }}">
    <div class="swiper-wrapper" {% if section.blocks.size < 3 %} style="display: flex; justify-content: center;" {% endif %}>
        {%- for block in section.blocks -%}
            <div class="swiper-slide">
            <a href="{{ block.settings.link.url }}" class="link-list-entry no-link-style">
                <div style="background-color: {{ section.settings.background_color_links | color_to_hex }}; height: {{ block.settings.image_width_mobile }}px; width: {{ block.settings.image_width_mobile }}px">
                    {% render 'image', 
                        image: block.settings.image,
                        placeholder_padding_vertical: 5,
                        placeholder_padding_horizontal: 5 %}
                </div>
                <span class="font-heading">{{ block.settings.label }}</span>
            </a>
            </div>
        {%- endfor -%}
    </div>
</div>


</div>
</div>
</div>

{% schema %}
{
    "name": "t:sections.section-link-list.name",
    "settings": [
        {
            "type": "color",
            "id": "background_color_links",
            "label": "t:sections.section-link-list.settings.background_color_links"
        },
        {
            "type": "range",
            "id": "per_view",
            "label": "t:sections.section-link-list.settings.per_view",
            "min": 1,
            "max": 5,
            "step": 0.5,
            "unit": "#",
            "default": 3.5
        },
        {
            "type": "header",
            "content": "t:sections.general.mobile_margin"
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_top",
            "label": "t:sections.section-compare-table.settings.overwrite_theme_margin_top",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 20
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_bottom",
            "label": "t:sections.section-compare-table.settings.overwrite_theme_margin_bottom",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 20
        },
        {
            "type": "header",
            "content": "t:sections.section-compare-table.settings.desktop_margin"
        },
        {
            "type": "range",
            "id": "desktop_margin_top",
            "label": "t:sections.section-compare-table.settings.desktop_margin_top",
            "min": -200,
            "max": 200,
            "step": 5,
            "unit": "px",
            "default": 30
        },
        {
            "type": "range",
            "id": "desktop_margin_bottom",
            "label": "t:sections.section-compare-table.settings.desktop_margin_bottom",
            "min": -200,
            "max": 200,
            "step": 5,
            "unit": "px",
            "default": 30
        }
    ],
    "blocks": [
        {
            "type": "link",
            "name": "t:sections.section-link-list.blocks.link.name",
            "settings": [
                {
                    "type": "richtext",
                    "id": "label",
                    "label": "t:sections.section-link-list.blocks.link.settings.label"
                },
                {
                    "type": "url",
                    "id": "link",
                    "label": "t:sections.section-link-list.blocks.link.settings.link"
                },
                {
                    "type": "image_picker",
                    "id": "image",
                    "label": "t:sections.section-link-list.blocks.link.settings.image"
                },
                {
                    "type": "range",
                    "id": "image_width_desktop",
                    "label": "t:sections.section-link-list.blocks.link.settings.image_width_desktop",
                    "min": 0,
                    "max": 200,
                    "step": 5,
                    "unit": "px",
                    "default": 75
                },
                {
                    "type": "range",
                    "id": "image_width_mobile",
                    "label": "t:sections.section-link-list.blocks.link.settings.image_width_mobile",
                    "min": 0,
                    "max": 200,
                    "step": 5,
                    "unit": "px",
                    "default": 75
                },
            ]
        }
    ],
    "presets": [
        {
            "name": "t:sections.section-link-list.name"
        }
    ]
}
{% endschema %}