Adobt new teaser rendering

public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/TeaserCountry.html

@@ -6,28 +6,31 @@
     <f:layout name="Bare"/>
 
     <f:section name="Main">
-        <f:link.typolink class="teaserbox teaserbox--country" parameter="{country.detailPage}" title="{country.name}">
+        <a href="{f:uri.typolink(parameter: country.detailPage)}" class="flex flex-col group">
-            <div class="teaserbox__image">
+            <div class="relative">
-                <svg class="teaserbox__flag">
+                <svg class="w-8 h-6 absolute top-0 left-0">
                     <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{country.code -> f:format.case(mode: 'lower')}"></use>
                 </svg>
-                <ep:lazyLoadImage image="{country.teaserImages.0}"
+                <f:if condition="{country.teaserImages}">
-                                  loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                    <ep:lazyLoadImage image="{country.teaserImages.0}"
-                                  class="block w-full h-full object-cover"
+                                      loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
-                                  width="360c"
+                                      class="block w-full h-full object-cover"
-                                  height="270c"
+                                      width="360c"
-                                  alt="{country.name}" />
+                                      height="270c"
+                                      alt="{country.name}" />
+                </f:if>
             </div>
-            <div class="teaserbox__main">
+            <div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200" data-rte-content>
-                <span class="headline headline--3">{country.name}</span>
+                <span class="headline--3 mb-4">
-                <hr>
+                    {country.name}
+                </span>
                 {country.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
             </div>
             <button type="button"
-                    class="button button--full teaserbox__button">
+                    class="button w-full">
-                {f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
+                {data.button -> v:or(alternative: 'Details')}
             </button>
-        </f:link.typolink>
+        </a>
     </f:section>
 
 </html>