<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 md:flex md:justify-around">
<ul class="splide__list md:!flex md:gap-8">
<li class="flex w-full splide__slide md:w-carousel-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 md:w-carousel-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>
</ul>
</div>
<div class="flex mx-auto justify-evenly splide__arrows max-w-content-max md:hidden">
<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",
"numberOfItems": 2,
"items": [
{
"imageId": 82,
"name": "Elena Grady",
"position": "Product Solutions Producer",
"phone": "+49 396 711 216",
"email": "elena.grady@talke.com"
},
{
"imageId": 93,
"name": "Andy Hoeger",
"position": "Human Optimization Developer",
"phone": "",
"email": "andy.hoeger@talke.com"
}
]
}
No notes defined.