<section class="rtds-section rtds-section--servizi">
    <!-- Section Header Servizi -->
    <div class="rtds-section-header rtds-section-header--servizi rtds-bg-white rtds-py-4 rtds-border-y rtds-border-gray-03">
        <div class="rtds-container rtds-space-y-4">
            <div class="rtds-grid md:rtds-flex rtds-items-center md:rtds-justify-between rtds-gap-4 md:rtds-gap-8 lg:rtds-gap-12 rtds-content-02 ">

                <div class="rtds-flex rtds-items-center rtds-gap-2 md:rtds-gap-4">
                    <svg class="rtds-icon rtds-fill-current rtds-w-9 rtds-h-9 rtds-flex-shrink-0" aria-hidden="true" focusable="false" role="img">
                        <use href="../../icons.svg#outline--cogs" />
                    </svg>

                    <div class="rtds-flex rtds-items-center rtds-gap-2">
                        <p id="serviziDesc1" class="rtds-text-sm lg:rtds-text-base md:rtds-grid"><strong>32 servizi</strong> disponibili</p>
                        <div class="rtds-vertical-divider rtds-w-4 md:rtds-w-6 lg:rtds-w-8">
                            <img class="rtds-w-full rtds-h-auto" src="/images/vertical-divider.svg" alt="">
                        </div>

                        <p id="serviziDesc2" class="rtds-text-sm lg:rtds-text-base md:rtds-grid"><strong>12</strong> <span class="rtds-sr-only">servizi </span>in evidenza</p>
                    </div>
                </div>

                <h2 id="serviziHeading" class="rtds-heading-2 2xl:rtds-text-2xl rtds-content-02 rtds-flex-1" aria-labelledby="serviziHeading serviziDesc1 serviziDesc2">I Servizi della Regione per cittadini, imprese, enti e terzo settore</h2>

                <!-- Cta servizi desktop -->
                <div class="rtds-hidden lg:rtds-flex lg:rtds-justify-end lg:rtds-ml-auto">
                    <a href="#" class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--secondary rtds-btn--s">

                        Vedi tutti<span class="rtds-sr-only"> i servizi della Regione</span>

                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#mini--chevron-right" />
                        </svg>

                    </a>

                </div>

            </div>

        </div>
    </div>

    <!-- Section Search Servizi -->
    <div class="rtds-search-servizi rtds-background-02">
        <div class="rtds-container rtds-space-y-4 rtds-py-8">
            <form class="rtds-max-w-[51rem] rtds-mx-auto" role="search" action="" aria-label="Cerca tra i servizi quello che ti serve">
                <div class="rtds-relative">
                    <div class="rtds-input-field rtds-gap-1 rtds-content-02 ">
                        <label for="serviziSearch" class="rtds-input-field__label rtds-content-02 rtds-text-sm md:rtds-text-base">
                            Cerca tra i servizi quello che ti serve

                        </label>

                        <div class="rtds-input">
                            <input id="serviziSearch" class="rtds-text-sm rtds-input-placeholder !rtds-pr-10" type="search" placeholder="es: Bollo auto, Corsi di formazione, ...">
                        </div>

                    </div>
                    <button type="submit" class="rtds-btn 
    rtds-btn--icon rtds-btn--only-text rtds-content-05 rtds-absolute rtds-right-1 rtds-bottom-1"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#solid--magnifying-glass" />
                        </svg>
                        <span class="rtds-sr-only">

                            Cerca servizio
                        </span>

                    </button>

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

    <!-- Section Servizi - List -->
    <div class="rtds-servizi-list">
        <div class="rtds-container rtds-py-6 md:rtds-pt-10 lg:rtds-pt-12 md:rtds-pb-16">

            <div class="rtds-carousel rtds-carousel--5-cols splide" aria-label="I Servizi della Regione">

                <div class="rtds-carousel__arrows splide__arrows">
                    <button class="rtds-carousel__arrow rtds-carousel__arrow--prev splide__arrow splide__arrow--prev">
                        <svg class="rtds-icon rtds-fill-current rtds-carousel__arrow-svg" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#solid--chevron-right" />
                        </svg>

                        <span class="rtds-sr-only">Precedente</span>
                    </button>
                    <button class="rtds-carousel__arrow rtds-carousel__arrow--next splide__arrow splide__arrow--next">
                        <svg class="rtds-icon rtds-fill-current rtds-carousel__arrow-svg" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#solid--chevron-right" />
                        </svg>

                        <span class="rtds-sr-only">Successiva</span>
                    </button>
                </div>

                <div class="rtds-carousel-wrapper splide__track">
                    <ul class="rtds-carousel__list splide__list rtds-space-y-6 md:rtds-space-y-0">

                        <li class="rtds-carousel-col splide__slide">
                            <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                                <div class="rtds-card__content">

                                    <div class="rtds-card__heading">

                                        <h3 class="rtds-card__title">
                                            <a class="group-hover/card:rtds-underline" href="">

                                                Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                            </a>
                                        </h3>

                                    </div>

                                    <div class="rtds-card__description ">
                                        <p>
                                            Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                        </p>
                                    </div>

                                    <ul class="rtds-card__tags" aria-label="Categorie">

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                    </ul>

                                </div>

                            </article>

                        </li>
                        <li class="rtds-carousel-col splide__slide">
                            <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                                <div class="rtds-card__content">

                                    <div class="rtds-card__heading">

                                        <h3 class="rtds-card__title">
                                            <a class="group-hover/card:rtds-underline" href="">

                                                Servizio 2

                                            </a>
                                        </h3>

                                    </div>

                                    <div class="rtds-card__description ">
                                        <p>
                                            Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                        </p>
                                    </div>

                                    <ul class="rtds-card__tags" aria-label="Categorie">

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                    </ul>

                                </div>

                            </article>

                        </li>

                        <li class="rtds-carousel-col splide__slide">
                            <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                                <div class="rtds-card__content">

                                    <div class="rtds-card__heading">

                                        <h3 class="rtds-card__title">
                                            <a class="group-hover/card:rtds-underline" href="">

                                                Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                            </a>
                                        </h3>

                                    </div>

                                    <div class="rtds-card__description ">
                                        <p>
                                            Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                        </p>
                                    </div>

                                    <ul class="rtds-card__tags" aria-label="Categorie">

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                    </ul>

                                </div>

                            </article>

                        </li>
                        <li class="rtds-carousel-col splide__slide">
                            <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                                <div class="rtds-card__content">

                                    <div class="rtds-card__heading">

                                        <h3 class="rtds-card__title">
                                            <a class="group-hover/card:rtds-underline" href="">

                                                Servizio 2

                                            </a>
                                        </h3>

                                    </div>

                                    <div class="rtds-card__description ">
                                        <p>
                                            Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                        </p>
                                    </div>

                                    <ul class="rtds-card__tags" aria-label="Categorie">

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                    </ul>

                                </div>

                            </article>

                        </li>

                        <li class="rtds-carousel-col splide__slide">
                            <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                                <div class="rtds-card__content">

                                    <div class="rtds-card__heading">

                                        <h3 class="rtds-card__title">
                                            <a class="group-hover/card:rtds-underline" href="">

                                                Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                            </a>
                                        </h3>

                                    </div>

                                    <div class="rtds-card__description ">
                                        <p>
                                            Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                        </p>
                                    </div>

                                    <ul class="rtds-card__tags" aria-label="Categorie">

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                    </ul>

                                </div>

                            </article>

                        </li>
                        <li class="rtds-carousel-col splide__slide">
                            <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                                <div class="rtds-card__content">

                                    <div class="rtds-card__heading">

                                        <h3 class="rtds-card__title">
                                            <a class="group-hover/card:rtds-underline" href="">

                                                Servizio 2

                                            </a>
                                        </h3>

                                    </div>

                                    <div class="rtds-card__description ">
                                        <p>
                                            Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                        </p>
                                    </div>

                                    <ul class="rtds-card__tags" aria-label="Categorie">

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                    </ul>

                                </div>

                            </article>

                        </li>

                        <li class="rtds-carousel-col splide__slide">
                            <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                                <div class="rtds-card__content">

                                    <div class="rtds-card__heading">

                                        <h3 class="rtds-card__title">
                                            <a class="group-hover/card:rtds-underline" href="">

                                                Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                            </a>
                                        </h3>

                                    </div>

                                    <div class="rtds-card__description ">
                                        <p>
                                            Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                        </p>
                                    </div>

                                    <ul class="rtds-card__tags" aria-label="Categorie">

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                    </ul>

                                </div>

                            </article>

                        </li>
                        <li class="rtds-carousel-col splide__slide">
                            <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                                <div class="rtds-card__content">

                                    <div class="rtds-card__heading">

                                        <h3 class="rtds-card__title">
                                            <a class="group-hover/card:rtds-underline" href="">

                                                Servizio 2

                                            </a>
                                        </h3>

                                    </div>

                                    <div class="rtds-card__description ">
                                        <p>
                                            Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                        </p>
                                    </div>

                                    <ul class="rtds-card__tags" aria-label="Categorie">

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                    </ul>

                                </div>

                            </article>

                        </li>

                        <li class="rtds-carousel-col splide__slide">
                            <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                                <div class="rtds-card__content">

                                    <div class="rtds-card__heading">

                                        <h3 class="rtds-card__title">
                                            <a class="group-hover/card:rtds-underline" href="">

                                                Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                            </a>
                                        </h3>

                                    </div>

                                    <div class="rtds-card__description ">
                                        <p>
                                            Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                        </p>
                                    </div>

                                    <ul class="rtds-card__tags" aria-label="Categorie">

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                    </ul>

                                </div>

                            </article>

                        </li>
                        <li class="rtds-carousel-col splide__slide">
                            <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                                <div class="rtds-card__content">

                                    <div class="rtds-card__heading">

                                        <h3 class="rtds-card__title">
                                            <a class="group-hover/card:rtds-underline" href="">

                                                Servizio 2

                                            </a>
                                        </h3>

                                    </div>

                                    <div class="rtds-card__description ">
                                        <p>
                                            Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                        </p>
                                    </div>

                                    <ul class="rtds-card__tags" aria-label="Categorie">

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                    </ul>

                                </div>

                            </article>

                        </li>

                        <li class="rtds-carousel-col splide__slide">
                            <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                                <div class="rtds-card__content">

                                    <div class="rtds-card__heading">

                                        <h3 class="rtds-card__title">
                                            <a class="group-hover/card:rtds-underline" href="">

                                                Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                            </a>
                                        </h3>

                                    </div>

                                    <div class="rtds-card__description ">
                                        <p>
                                            Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                        </p>
                                    </div>

                                    <ul class="rtds-card__tags" aria-label="Categorie">

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                    </ul>

                                </div>

                            </article>

                        </li>
                        <li class="rtds-carousel-col splide__slide">
                            <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                                <div class="rtds-card__content">

                                    <div class="rtds-card__heading">

                                        <h3 class="rtds-card__title">
                                            <a class="group-hover/card:rtds-underline" href="">

                                                Servizio 2

                                            </a>
                                        </h3>

                                    </div>

                                    <div class="rtds-card__description ">
                                        <p>
                                            Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                        </p>
                                    </div>

                                    <ul class="rtds-card__tags" aria-label="Categorie">

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                    </ul>

                                </div>

                            </article>

                        </li>

                        <li class="rtds-carousel-col splide__slide">
                            <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                                <div class="rtds-card__content">

                                    <div class="rtds-card__heading">

                                        <h3 class="rtds-card__title">
                                            <a class="group-hover/card:rtds-underline" href="">

                                                Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                            </a>
                                        </h3>

                                    </div>

                                    <div class="rtds-card__description ">
                                        <p>
                                            Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                        </p>
                                    </div>

                                    <ul class="rtds-card__tags" aria-label="Categorie">

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                    </ul>

                                </div>

                            </article>

                        </li>
                        <li class="rtds-carousel-col splide__slide">
                            <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                                <div class="rtds-card__content">

                                    <div class="rtds-card__heading">

                                        <h3 class="rtds-card__title">
                                            <a class="group-hover/card:rtds-underline" href="">

                                                Servizio 2

                                            </a>
                                        </h3>

                                    </div>

                                    <div class="rtds-card__description ">
                                        <p>
                                            Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                        </p>
                                    </div>

                                    <ul class="rtds-card__tags" aria-label="Categorie">

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                    </ul>

                                </div>

                            </article>

                        </li>

                        <li class="rtds-carousel-col splide__slide">
                            <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                                <div class="rtds-card__content">

                                    <div class="rtds-card__heading">

                                        <h3 class="rtds-card__title">
                                            <a class="group-hover/card:rtds-underline" href="">

                                                Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                            </a>
                                        </h3>

                                    </div>

                                    <div class="rtds-card__description ">
                                        <p>
                                            Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                        </p>
                                    </div>

                                    <ul class="rtds-card__tags" aria-label="Categorie">

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                    </ul>

                                </div>

                            </article>

                        </li>
                        <li class="rtds-carousel-col splide__slide">
                            <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                                <div class="rtds-card__content">

                                    <div class="rtds-card__heading">

                                        <h3 class="rtds-card__title">
                                            <a class="group-hover/card:rtds-underline" href="">

                                                Servizio 2

                                            </a>
                                        </h3>

                                    </div>

                                    <div class="rtds-card__description ">
                                        <p>
                                            Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                        </p>
                                    </div>

                                    <ul class="rtds-card__tags" aria-label="Categorie">

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                    </ul>

                                </div>

                            </article>

                        </li>

                        <li class="rtds-carousel-col splide__slide">
                            <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                                <div class="rtds-card__content">

                                    <div class="rtds-card__heading">

                                        <h3 class="rtds-card__title">
                                            <a class="group-hover/card:rtds-underline" href="">

                                                Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                            </a>
                                        </h3>

                                    </div>

                                    <div class="rtds-card__description ">
                                        <p>
                                            Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                        </p>
                                    </div>

                                    <ul class="rtds-card__tags" aria-label="Categorie">

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                    </ul>

                                </div>

                            </article>

                        </li>
                        <li class="rtds-carousel-col splide__slide">
                            <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                                <div class="rtds-card__content">

                                    <div class="rtds-card__heading">

                                        <h3 class="rtds-card__title">
                                            <a class="group-hover/card:rtds-underline" href="">

                                                Servizio 2

                                            </a>
                                        </h3>

                                    </div>

                                    <div class="rtds-card__description ">
                                        <p>
                                            Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                        </p>
                                    </div>

                                    <ul class="rtds-card__tags" aria-label="Categorie">

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                        <li><span class="rtds-chip rtds-chip--category rtds-chip--sm">
                                                label</span></li>

                                    </ul>

                                </div>

                            </article>

                        </li>

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

        </div>

        <!-- Cta servizi mobile -->
        <div class="rtds-flex rtds-justify-center rtds-py-8 md:rtds-hidden">
            <a href="#" class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--secondary rtds-btn--l">

                vedi tutti i servizi

                <svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--chevron-right" />
                </svg>

            </a>

        </div>
    </div>
</section>
<section class="rtds-section rtds-section--servizi">
    <!-- Section Header Servizi -->
    <div class="rtds-section-header rtds-section-header--servizi rtds-bg-white rtds-py-4 rtds-border-y rtds-border-gray-03">
        <div class="rtds-container rtds-space-y-4">
            <div class="rtds-grid md:rtds-flex rtds-items-center md:rtds-justify-between rtds-gap-4 md:rtds-gap-8 lg:rtds-gap-12 rtds-content-02 ">

                <div class="rtds-flex rtds-items-center rtds-gap-2 md:rtds-gap-4">
                    {% render '@icon',{ id: 'outline--cogs', size: 'rtds-w-9 rtds-h-9 rtds-flex-shrink-0'}, true %}
                    <div class="rtds-flex rtds-items-center rtds-gap-2">
                        <p id="serviziDesc1" class="rtds-text-sm lg:rtds-text-base md:rtds-grid"><strong>32 servizi</strong> disponibili</p>
                        {% render '@vertical-divider',{ width: "rtds-w-4 md:rtds-w-6 lg:rtds-w-8" }, true %}
                        <p id="serviziDesc2" class="rtds-text-sm lg:rtds-text-base md:rtds-grid"><strong>12</strong> <span class="rtds-sr-only">servizi </span>in evidenza</p>
                    </div>
                </div>

                <h2 id="serviziHeading" class="rtds-heading-2 2xl:rtds-text-2xl rtds-content-02 rtds-flex-1" aria-labelledby="serviziHeading serviziDesc1 serviziDesc2">I Servizi della Regione per cittadini, imprese, enti e terzo settore</h2>
                
                
                <!-- Cta servizi desktop -->
                <div class="rtds-hidden lg:rtds-flex lg:rtds-justify-end lg:rtds-ml-auto">
                    {% render '@button--icon-right',{ href: '#', classes: 'rtds-btn--secondary rtds-btn--s', label: 'Vedi tutti<span class="rtds-sr-only"> i servizi della Regione</span>', hasIcon: 'true' }, true %}
                </div>

            </div>

        </div>
    </div>

    <!-- Section Search Servizi -->
    <div class="rtds-search-servizi rtds-background-02">
        <div class="rtds-container rtds-space-y-4 rtds-py-8">
            <form class="rtds-max-w-[51rem] rtds-mx-auto" role="search" action="" aria-label="Cerca tra i servizi quello che ti serve">
                <div class="rtds-relative">
                    {% render '@input-field', {inputId: 'serviziSearch', labelClasses: 'rtds-content-02 rtds-text-sm md:rtds-text-base', classes: 'rtds-content-02', inputType: 'search', inputClasses: '!rtds-pr-10', inputPlaceholder: 'es: Bollo auto, Corsi di formazione, ...', label: 'Cerca tra i servizi quello che ti serve' }, true %}
                    {% render '@button--icon',{ buttonType: 'submit', classes: 'rtds-btn--only-text rtds-content-05 rtds-absolute rtds-right-1 rtds-bottom-1', label: 'Cerca servizio', hasIcon: 'true', icon: 'solid--magnifying-glass' }, true %}
                </div>
            </form>
        </div>
    </div>

    <!-- Section Servizi - List -->
    <div class="rtds-servizi-list">
        {% render '@servizi--carousel' %}

    <!-- Cta servizi mobile -->
        <div class="rtds-flex rtds-justify-center rtds-py-8 md:rtds-hidden">
            {% render '@button--icon-right-l',{ href: '#', classes: 'rtds-btn--secondary', label: 'vedi tutti i servizi', hasIcon: 'true' }, true %}
        </div>
    </div>
</section>
{
  "items": 3
}

Servizi section

  • Default: complete homepage section
  • carousel: partial component(used in homepage and where it’s needed)
  • grid: section with grid and cta. Cta is shown when items are more than grid columns/grid items number.