{% if mobile %}
    {% if relateds is not empty %}
    <section class="py-4 -mx-4 bg-[#e4e4e4] border-t-2 border-[#cdcdcd]">
{#         <span class="uppercase text-primary text-xl font-semibold block">Ti potrebbe interessare:</span>
                    
        <div class="overflow-x-scroll whitespace-nowrap hidden-scrollbar pl-4 -mx-4 lg:mx-0 lg:p-0 my-4">
            {% for card in relateds|slice(0,8) %}
            <div class="inline-block align-top mr-4 max-w-[280px]">
                {% include 'templates/components/cards/card-square-list-small.twig' %}
            </div>
            {% endfor %}
        </div> #}

        <div class="bg-white p-4 border-t border-b-2 border-[#cdcdcd]">
            <span class="text-primary text-md  block">Notizie relazionate</span>
            <div class="grid grid-cols-1 gap-4 divide-y divide-slate-200">
                {% for card in relateds|slice(0,5) %}
                <div class="pt-4">
                    {% include 'templates/components/cards/card.twig' %}
                </div>
                {% endfor %}
            </div>
        </div>

    </section>

    <style>
        .card_clip_path_medium {
            clip-path: path("M0 64Q0 48 16 48Q48 48 48 16Q48 0 64 0H5000V50000H0Z");
            transform: scaleX(-1);
        }
    </style>

    {% endif %}
{% endif %}

