<div class="my-12 mask-top" id="c753">
<div class="mask-bottom
bg-talke-blue
">
<div class="px-8 py-mask">
<div class="mb-12 text-white">
<div class="mx-auto text-center max-w-teaser-intro
">
<h1 class="mb-3 text-xl font-talke-semibold">
Adamo culpo
</h1>
<h2 class="mb-3 text-2xl uppercase font-talke-semibold">
Pecto quam magni atrox
</h2>
</div>
</div>
<div class="splide splideRelatedTopics">
<div class="mx-auto mb-12 splide__track max-w-content-max">
<ul class="splide__list">
<li class="flex w-full splide__slide">
<a href="#" 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/12/342/245" alt="" />
</div>
<div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
<div>
<h2 class="mb-3 text-lg font-talke-semibold">
Adiuvo venustas
</h2>
<h1 class="mb-2 text-2xl uppercase font-talke-semibold">
Desino decerno tamquam
</h1>
<p class="mb-5 text-lg font-talke-regular text-talke-light-blue">
Desidero dolorum degenero. Theatrum veritatis vestrum cognomen temptatio avarus templum nisi absens. Apto argentum universe tabernus. Callide tam anser acies ulciscor totus rem molestiae congregatio vomer.
</p>
</div>
<div class="text-lg underline transition-colors duration-500 group-hover:decoration-inherit font-talke-semibold decoration-transparent">
Read more
</div>
</div>
</a>
</li>
<li class="flex w-full splide__slide">
<a href="#" 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/23/342/245" alt="" />
</div>
<div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
<div>
<h2 class="mb-3 text-lg font-talke-semibold">
Capillus totidem
</h2>
<h1 class="mb-2 text-2xl uppercase font-talke-semibold">
Atqui aegrotatio sordeo
</h1>
<p class="mb-5 text-lg font-talke-regular text-talke-light-blue">
Omnis crebro ocer congregatio calamitas capto quas alienus. Apparatus despecto claudeo autus totus iure clibanus illum tolero. Peccatus vis sperno adamo admitto volutabrum vigor cur tabernus. Rem vir illum vis.
</p>
</div>
<div class="text-lg underline transition-colors duration-500 group-hover:decoration-inherit font-talke-semibold decoration-transparent">
Read more
</div>
</div>
</a>
</li>
<li class="flex w-full splide__slide">
<a href="#" 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/16/342/245" alt="" />
</div>
<div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
<div>
<h2 class="mb-3 text-lg font-talke-semibold">
Spectaculum cultura
</h2>
<h1 class="mb-2 text-2xl uppercase font-talke-semibold">
Ab vir aegrotatio
</h1>
<p class="mb-5 text-lg font-talke-regular text-talke-light-blue">
Calcar nam admiratio civitas suscipio solum vereor volutabrum ustilo adhuc. Stips pax delectus. Accedo umbra unde caelum. Thesis omnis bos.
</p>
</div>
<div class="text-lg underline transition-colors duration-500 group-hover:decoration-inherit font-talke-semibold decoration-transparent">
Read more
</div>
</div>
</a>
</li>
<li class="flex w-full splide__slide">
<a href="#" 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/24/342/245" alt="" />
</div>
<div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
<div>
<h2 class="mb-3 text-lg font-talke-semibold">
Thorax eos
</h2>
<h1 class="mb-2 text-2xl uppercase font-talke-semibold">
Defessus centum valens
</h1>
<p class="mb-5 text-lg font-talke-regular text-talke-light-blue">
Cribro harum claro aliquam delicate. Tyrannus cernuus coma theca. Vesco deleo depromo subseco facilis impedit cedo. Ver contabesco comedo aiunt vesco somniculosus stella.
</p>
</div>
<div class="text-lg underline transition-colors duration-500 group-hover:decoration-inherit font-talke-semibold decoration-transparent">
Read more
</div>
</div>
</a>
</li>
<li class="flex w-full splide__slide">
<a href="#" 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>
<h2 class="mb-3 text-lg font-talke-semibold">
Confero depopulo
</h2>
<h1 class="mb-2 text-2xl uppercase font-talke-semibold">
Tergeo consequuntur allatus
</h1>
<p class="mb-5 text-lg font-talke-regular text-talke-light-blue">
Sum compono nemo aeger nisi praesentium tribuo. Error clementia aiunt amiculum amplus amaritudo terror supellex. Tollo cognomen caritas acsi stella. Ars cupressus demitto volubilis argentum sordeo tracto aiunt auctus.
</p>
</div>
<div class="text-lg underline transition-colors duration-500 group-hover:decoration-inherit font-talke-semibold decoration-transparent">
Read more
</div>
</div>
</a>
</li>
<li class="flex w-full splide__slide">
<a href="#" 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/27/342/245" alt="" />
</div>
<div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
<div>
<h2 class="mb-3 text-lg font-talke-semibold">
Uberrime defero
</h2>
<h1 class="mb-2 text-2xl uppercase font-talke-semibold">
Cubicularis adsidue arma
</h1>
<p class="mb-5 text-lg font-talke-regular text-talke-light-blue">
Claustrum balbus tubineus tenax cultellus subnecto verecundia tristis. Exercitationem approbo copia teneo fugiat blanditiis veniam. Tumultus vaco soluta commodi dolorum arma numquam aestus. Thymbra socius desidero assentator somniculosus trucido utique armarium.
</p>
</div>
<div class="text-lg underline transition-colors duration-500 group-hover:decoration-inherit font-talke-semibold decoration-transparent">
Read more
</div>
</div>
</a>
</li>
<li class="flex w-full splide__slide">
<a href="#" 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/92/342/245" alt="" />
</div>
<div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
<div>
<h2 class="mb-3 text-lg font-talke-semibold">
Communis carus
</h2>
<h1 class="mb-2 text-2xl uppercase font-talke-semibold">
Blanditiis voluptatem studio
</h1>
<p class="mb-5 text-lg font-talke-regular text-talke-light-blue">
Amaritudo tot tabula verto dignissimos consectetur. Distinctio tenetur chirographum delinquo sub sunt ambitus curto. Necessitatibus caput demitto solum conforto caelum. Angelus caelum cubo clibanus alo tunc desparatus sit totam vallum.
</p>
</div>
<div class="text-lg underline transition-colors duration-500 group-hover:decoration-inherit font-talke-semibold decoration-transparent">
Read more
</div>
</div>
</a>
</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 bg-white rounded text-talke-blue prev">
<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 bg-white rounded text-talke-blue next">
<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>
</div>
</div>
{{#> @mask--blue}}
<div class="px-8 py-mask">
<div class="mb-12 text-white">
{{> @teaser-intro--white intro }}
</div>
<div class="splide splideRelatedTopics">
<div class="mx-auto mb-12 splide__track max-w-content-max">
<ul class="splide__list">
{{#each items}}
<li class="flex w-full splide__slide">
{{render "@teaser-topic" this merge=true}}
</li>
{{/each}}
</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 bg-white rounded text-talke-blue prev">
{{> @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 bg-white rounded text-talke-blue next">
{{> @icon--navigationarrow additionalClasses="shrink-0 h-2 w-auto fill-current rotate-90"}}
</button>
</div>
</div>
</div>
{{/@mask--blue}}
{
"id": "c753",
"intro": {
"headlineSmall": "Adamo culpo",
"headlineLarge": "Pecto quam magni atrox"
},
"items": [
{
"imageId": 12,
"category": "Adiuvo venustas",
"headline": "Desino decerno tamquam",
"text": "Desidero dolorum degenero. Theatrum veritatis vestrum cognomen temptatio avarus templum nisi absens. Apto argentum universe tabernus. Callide tam anser acies ulciscor totus rem molestiae congregatio vomer.",
"linkText": "Read more"
},
{
"imageId": 23,
"category": "Capillus totidem",
"headline": "Atqui aegrotatio sordeo",
"text": "Omnis crebro ocer congregatio calamitas capto quas alienus. Apparatus despecto claudeo autus totus iure clibanus illum tolero. Peccatus vis sperno adamo admitto volutabrum vigor cur tabernus. Rem vir illum vis.",
"linkText": "Read more"
},
{
"imageId": 16,
"category": "Spectaculum cultura",
"headline": "Ab vir aegrotatio",
"text": "Calcar nam admiratio civitas suscipio solum vereor volutabrum ustilo adhuc. Stips pax delectus. Accedo umbra unde caelum. Thesis omnis bos.",
"linkText": "Read more"
},
{
"imageId": 24,
"category": "Thorax eos",
"headline": "Defessus centum valens",
"text": "Cribro harum claro aliquam delicate. Tyrannus cernuus coma theca. Vesco deleo depromo subseco facilis impedit cedo. Ver contabesco comedo aiunt vesco somniculosus stella.",
"linkText": "Read more"
},
{
"imageId": 78,
"category": "Confero depopulo",
"headline": "Tergeo consequuntur allatus",
"text": "Sum compono nemo aeger nisi praesentium tribuo. Error clementia aiunt amiculum amplus amaritudo terror supellex. Tollo cognomen caritas acsi stella. Ars cupressus demitto volubilis argentum sordeo tracto aiunt auctus.",
"linkText": "Read more"
},
{
"imageId": 27,
"category": "Uberrime defero",
"headline": "Cubicularis adsidue arma",
"text": "Claustrum balbus tubineus tenax cultellus subnecto verecundia tristis. Exercitationem approbo copia teneo fugiat blanditiis veniam. Tumultus vaco soluta commodi dolorum arma numquam aestus. Thymbra socius desidero assentator somniculosus trucido utique armarium.",
"linkText": "Read more"
},
{
"imageId": 92,
"category": "Communis carus",
"headline": "Blanditiis voluptatem studio",
"text": "Amaritudo tot tabula verto dignissimos consectetur. Distinctio tenetur chirographum delinquo sub sunt ambitus curto. Necessitatibus caput demitto solum conforto caelum. Angelus caelum cubo clibanus alo tunc desparatus sit totam vallum.",
"linkText": "Read more"
}
]
}
No notes defined.