


{% if mobile %}
{% set card_component = 'card-related' %}
{% else %}
{% set card_component = 'card-intext-related' %}


    {% if section.content.length > 2 %}

    <style>
        #slider_intext_relateds {
            max-width: 668px;;
        }
        .swiper-slide {
            width: 100%;
            max-width: 668px;
            display: block !important;
            text-align: left;
        }
    </style>


    <link rel="stylesheet"href="{{styles_dir}}/lib/swiper-bundle.min.css"/>
    <script src="{{scripts_dir}}/swiper-bundle.min.js"></script>
    {% endif %}
{% endif %}



<section class="mb-4">

    {% if section.content.length > 2 %}
    
        {% include "templates/components/common/carousel.twig" with {
            'slider_id'      : 'intext_relateds',
            'loop'           : section.content,
            'slides_per_view': 2,
            'pagination'     : false,
            'showmore'       : false,
            'component'      : card_component
        } %}
    {% else %}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            {% for card in section.content %}
                {% include "templates/components/cards/card-intext-related.twig" with {
                    'card' : card
                } %}
            {% endfor %}
        </div>
    {% endif %}

</section>