<div class="px-8 my-12" id="c598">
    <div class="mb-12">
        <div class="mx-auto text-center max-w-teaser-intro
  text-talke-blue
  
">
            <h1 class="mb-3 text-xl font-talke-semibold">
                Quis speciosus
            </h1>
            <h2 class="mb-3 text-2xl uppercase font-talke-semibold">
                Acceptus averto arguo nihil
            </h2>
            <p class="text-sm font-talke-regular text-talke-text-gray">
                Velut somnus bonus sum campana chirographum aduro cui tempore tunc velum sodalitas talio coma titulus decumbo credo despecto creptio ceno.
            </p>
        </div>

    </div>
    <div class="mx-auto mb-12 text-2xl text-center max-w-content-max font-talke-light text-talke-blue">
        Chicago
    </div>
    <div class="splide splideContacts">
        <div class="mx-auto mb-12 splide__track max-w-content-max ">
            <ul class="splide__list ">
                <li class="flex w-full splide__slide ">
                    <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                        <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                            <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/82/342/245" alt="" />
                        </div>
                        <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                            <div>
                                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                    Elena Grady
                                </h1>
                                <h2 class="mb-5 text-lg font-talke-semibold">
                                    Product Solutions Producer
                                </h2>
                                <p class="mb-5 text-lg font-talke-semibold text-talke-light-blue">
                                    Tel: <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="tel:#">+49 396 711 216</a>
                                </p>
                            </div>
                            <div class="text-lg font-talke-semibold text-talke-light-blue">
                                E-Mail:<br>
                                <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">elena.grady@talke.com</a>
                            </div>
                        </div>
                    </div>

                </li>
                <li class="flex w-full splide__slide ">
                    <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                        <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                            <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/93/342/245" alt="" />
                        </div>
                        <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                            <div>
                                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                    Andy Hoeger
                                </h1>
                                <h2 class="mb-5 text-lg font-talke-semibold">
                                    Human Optimization Developer
                                </h2>
                            </div>
                            <div class="text-lg font-talke-semibold text-talke-light-blue">
                                E-Mail:<br>
                                <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">andy.hoeger@talke.com</a>
                            </div>
                        </div>
                    </div>

                </li>
                <li class="flex w-full splide__slide ">
                    <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                        <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                            <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/43/342/245" alt="" />
                        </div>
                        <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                            <div>
                                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                    Vivianne Johnson
                                </h1>
                                <h2 class="mb-5 text-lg font-talke-semibold">
                                    Regional Research Executive
                                </h2>
                                <p class="mb-5 text-lg font-talke-semibold text-talke-light-blue">
                                    Tel: <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="tel:#">+49 277 498 725</a>
                                </p>
                            </div>
                            <div class="text-lg font-talke-semibold text-talke-light-blue">
                                E-Mail:<br>
                                <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">vivianne.johnson@talke.com</a>
                            </div>
                        </div>
                    </div>

                </li>
                <li class="flex w-full splide__slide ">
                    <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                        <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                            <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/86/342/245" alt="" />
                        </div>
                        <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                            <div>
                                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                    Shayne Collier
                                </h1>
                                <h2 class="mb-5 text-lg font-talke-semibold">
                                    Principal Tactics Orchestrator
                                </h2>
                                <p class="mb-5 text-lg font-talke-semibold text-talke-light-blue">
                                    Tel: <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="tel:#">+49 954 970 132</a>
                                </p>
                            </div>
                            <div class="text-lg font-talke-semibold text-talke-light-blue">
                                E-Mail:<br>
                                <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">shayne.collier@talke.com</a>
                            </div>
                        </div>
                    </div>

                </li>
                <li class="flex w-full splide__slide ">
                    <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                        <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                            <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/75/342/245" alt="" />
                        </div>
                        <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                            <div>
                                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                    Darren Cartwright
                                </h1>
                                <h2 class="mb-5 text-lg font-talke-semibold">
                                    Senior Implementation Designer
                                </h2>
                                <p class="mb-5 text-lg font-talke-semibold text-talke-light-blue">
                                    Tel: <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="tel:#">+49 525 730 775</a>
                                </p>
                            </div>
                            <div class="text-lg font-talke-semibold text-talke-light-blue">
                                E-Mail:<br>
                                <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">darren.cartwright@talke.com</a>
                            </div>
                        </div>
                    </div>

                </li>
                <li class="flex w-full splide__slide ">
                    <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                        <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                            <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/78/342/245" alt="" />
                        </div>
                        <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                            <div>
                                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                    Jerry Little
                                </h1>
                                <h2 class="mb-5 text-lg font-talke-semibold">
                                    Human Brand Engineer
                                </h2>
                                <p class="mb-5 text-lg font-talke-semibold text-talke-light-blue">
                                    Tel: <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="tel:#">+49 580 316 174</a>
                                </p>
                            </div>
                            <div class="text-lg font-talke-semibold text-talke-light-blue">
                                E-Mail:<br>
                                <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">jerry.little@talke.com</a>
                            </div>
                        </div>
                    </div>

                </li>
                <li class="flex w-full splide__slide ">
                    <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                        <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                            <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/69/342/245" alt="" />
                        </div>
                        <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                            <div>
                                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                    Ariane Lind
                                </h1>
                                <h2 class="mb-5 text-lg font-talke-semibold">
                                    Lead Response Strategist
                                </h2>
                                <p class="mb-5 text-lg font-talke-semibold text-talke-light-blue">
                                    Tel: <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="tel:#">+49 105 133 848</a>
                                </p>
                            </div>
                            <div class="text-lg font-talke-semibold text-talke-light-blue">
                                E-Mail:<br>
                                <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">ariane.lind@talke.com</a>
                            </div>
                        </div>
                    </div>

                </li>
                <li class="flex w-full splide__slide ">
                    <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                        <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                            <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/33/342/245" alt="" />
                        </div>
                        <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                            <div>
                                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                    Rashawn Wilkinson
                                </h1>
                                <h2 class="mb-5 text-lg font-talke-semibold">
                                    Internal Tactics Technician
                                </h2>
                                <p class="mb-5 text-lg font-talke-semibold text-talke-light-blue">
                                    Tel: <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="tel:#">+49 128 218 405</a>
                                </p>
                            </div>
                            <div class="text-lg font-talke-semibold text-talke-light-blue">
                                E-Mail:<br>
                                <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">rashawn.wilkinson@talke.com</a>
                            </div>
                        </div>
                    </div>

                </li>
                <li class="flex w-full splide__slide ">
                    <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                        <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                            <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/83/342/245" alt="" />
                        </div>
                        <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                            <div>
                                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                    Marcellus Keebler
                                </h1>
                                <h2 class="mb-5 text-lg font-talke-semibold">
                                    Product Tactics Representative
                                </h2>
                                <p class="mb-5 text-lg font-talke-semibold text-talke-light-blue">
                                    Tel: <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="tel:#">+49 184 807 289</a>
                                </p>
                            </div>
                            <div class="text-lg font-talke-semibold text-talke-light-blue">
                                E-Mail:<br>
                                <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">marcellus.keebler@talke.com</a>
                            </div>
                        </div>
                    </div>

                </li>
                <li class="flex w-full splide__slide ">
                    <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                        <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                            <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/79/342/245" alt="" />
                        </div>
                        <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                            <div>
                                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                    Scarlett Pollich
                                </h1>
                                <h2 class="mb-5 text-lg font-talke-semibold">
                                    Forward Response Representative
                                </h2>
                                <p class="mb-5 text-lg font-talke-semibold text-talke-light-blue">
                                    Tel: <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="tel:#">+49 953 802 790</a>
                                </p>
                            </div>
                            <div class="text-lg font-talke-semibold text-talke-light-blue">
                                E-Mail:<br>
                                <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">scarlett.pollich@talke.com</a>
                            </div>
                        </div>
                    </div>

                </li>
            </ul>
        </div>
        <div class="flex mx-auto justify-evenly splide__arrows max-w-content-max ">
            <button class="flex items-center justify-center w-10 h-10 text-white rounded prev bg-talke-blue">
                <svg class="shrink-0 h-2 w-auto fill-current -rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                    <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                </svg>
            </button>
            <ul class="px-10 splide__pagination"></ul>
            <button class="flex items-center justify-center w-10 h-10 text-white rounded next bg-talke-blue">
                <svg class="shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                    <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                </svg>
            </button>
        </div>
    </div>
</div>
{{#ifCond items.length "==" "3"}}
  {{assign "listClasses" "!flex justify-between"}}
  {{assign "slideClasses" "lg:max-w-carousel-slide"}}
  {{assign "arrowClasses" "lg:hidden"}}
{{/ifCond}}

{{#ifCond items.length "<=" "2"}}
  {{assign "listClasses" "md:!flex md:gap-8"}}
  {{assign "slideClasses" "md:w-carousel-slide"}}
  {{assign "trackClasses" "md:flex md:justify-around"}}
  {{assign "arrowClasses" "md:hidden"}}
{{/ifCond}}

<div class="px-8 my-12" id="{{id}}">
  <div class="mb-12">
    {{render "@teaser-intro"}}
  </div>
  <div class="mx-auto mb-12 text-2xl text-center max-w-content-max font-talke-light text-talke-blue">
    {{location}}
  </div>
  <div class="{{#ifCond items.length ">" 1}}splide{{/ifCond}} splideContacts">
    <div class="mx-auto mb-12 splide__track max-w-content-max {{trackClasses}}">
      <ul class="splide__list {{listClasses}}">
        {{#each items as |item|}}
        <li class="flex w-full splide__slide {{../slideClasses}}">
          {{render "@teaser-contact" this merge=true}}
        </li>
        {{/each}}
      </ul>
    </div>
    {{#ifCond items.length ">" 1}}
    <div class="flex mx-auto justify-evenly splide__arrows max-w-content-max {{arrowClasses}}">
      <button class="flex items-center justify-center w-10 h-10 text-white rounded prev bg-talke-blue">
        {{> @icon--navigationarrow additionalClasses="shrink-0 h-2 w-auto fill-current -rotate-90"}}
      </button>
      <ul class="px-10 splide__pagination"></ul>
      <button class="flex items-center justify-center w-10 h-10 text-white rounded next bg-talke-blue">
        {{> @icon--navigationarrow additionalClasses="shrink-0 h-2 w-auto fill-current rotate-90"}}
      </button>
    </div>
    {{/ifCond}}
  </div>
  </div>
{
  "id": "c598",
  "location": "Chicago"
}

No notes defined.