diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventHero.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventHero.html
index d35a0db5..dc22dec2 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventHero.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventHero.html
@@ -1,53 +1,72 @@
-{namespace v=FluidTYPO3\Vhs\ViewHelpers}
-<div class="herounit herounit--event">
-    <div id="ep-main-carousel" class="navbar-carousel carousel slide">
-        <div class="item{f:if(condition: iteration.isFirst, then: ' active')}">
-            <div class="container stoerer">
-                <div class="grid col-span-12 gap-4">
-	                <div class="col-span-12 md:col-span-3 lg:col-span-2 lg:col-start-2">
-		                <div>{settings.eventDateDayFrom -> f:format.raw()}<br>-<br>{settings.eventDateDayTo -> f:format.raw()}</div>
-		                <div>{settings.eventDateMonth -> f:format.raw()}</div>
-	                </div>
-	                <div class="col-span-6 md:col-span-4 lg:col-span-3">{settings.eventHeroClaim -> f:format.raw()}</div>
-	                <div class="col-span-6 md:col-span-3 lg:col-span-2">{settings.eventHeroDescription -> f:format.raw()}</div>
+<html data-namespace-typo3-fluid="true" lang="en"
+      xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
+
+    <div class="relative max-w-screen-2xl mx-auto">
+        <div class="absolute bottom-0 left-0 inset-x-0 py-8 sbw:bg-sbw-overlay-secondary">
+            <div class="max-w-screen-md mx-auto px-4 md:px-0 flex">
+                <div class="sbw:bg-sbw-primary hidden md:flex flex-col justify-center">
+                    <div class="text-white font-extrabold text-5xl flex-1 flex flex-col justify-around items-center text-center leading-none py-2 px-16">
+                        <span>{settings.eventDateDayFrom -> f:format.raw()}</span>
+                        <span>-</span>
+                        <span>{settings.eventDateDayTo -> f:format.raw()}</span>
+                    </div>
+                    <div class="w-full px-4 bg-white text-center sbw:text-sbw-primary p-2 whitespace-nowrap text-2xl uppercase font-bold leading-tight">
+                        {settings.eventDateMonth -> f:format.raw()}
+                    </div>
+                </div>
+                <div class="text-white uppercase text-7xl text-right md:text-left font-extrabold pr-8 md:px-8">
+                    {settings.eventHeroClaim -> f:format.raw()}
+                </div>
+                <div class="text-white text-2xl font-light border-l-8 border-white pl-2">
+                    {settings.eventHeroDescription -> f:format.raw()}
                 </div>
             </div>
-	        {slides -> v:iterator.first() -> v:variable.set(name: 'slide')}
-            <f:if condition="{slide.image.0}">
+        </div>
+        <f:alias map="{image: slide.image.0}">
+            <f:if condition="{image}">
                 <f:then>
-                    <img src="{f:uri.image(image: slide.image.0, width: '1370')}"
-                         alt="{slide.image.0.alternative}" title="{slide.image.0.title}">
+                    <picture>
+                        <source srcset="{f:uri.image(image: image, width: '1370')}" media="(min-width: 768px)">
+                        <source srcset="{f:uri.image(image: image, height: '320')}" media="(max-width: 767px)">
+                        <img class="block w-full h-full object-cover"
+                             src="{f:uri.image(image: image, height: '320')}"
+                             alt="{image.alternative}">
+                    </picture>
                 </f:then>
                 <f:else>
                     <img src="https://placehold.it/1370x700" alt="">
                 </f:else>
             </f:if>
-        </div>
-    </div>
-    <f:if condition="{badge}">
-        <f:alias map="{badgeData: badge.0.data}">
-            <f:link.typolink parameter="{badgeData.link}">
-                <div class="herounit__badge herounit__badge--custom custom-badge">
-                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                         preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="custom-badge__background">
-                        <g>
+        </f:alias>
+        <f:comment><!--
+        <f:if condition="{badge}">
+            <f:alias map="{badgeData: badge.0.data}">
+                <f:link.typolink parameter="{badgeData.link}">
+                    <div class="herounit__badge herounit__badge--custom custom-badge">
+                        <svg xmlns="http://www.w3.org/2000/svg"
+                             preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="custom-badge__background">
                             <circle id="bgouter" cx="100" cy="100" r="100"/>
                             <circle id="bginner" cx="100" cy="100" r="70"/>
-                        </g>
-                    </svg>
-                    <div class="custom-badge__content">
-                        <span class="custom-badge__title">{badgeData.title -> f:format.raw()}</span>
-                        <span class="custom-badge__subtitle">{badgeData.subtitle -> f:format.raw()}</span>
+                        </svg>
+                        <div class="custom-badge__content">
+                            <span class="custom-badge__title">{badgeData.title -> f:format.raw()}</span>
+                            <span class="custom-badge__subtitle">{badgeData.subtitle -> f:format.raw()}</span>
+                        </div>
                     </div>
-                </div>
+                </f:link.typolink>
+            </f:alias>
+        </f:if>
+        --></f:comment>
+        <f:comment><!--
+        <f:if condition="{settings.eventAddon}">
+            <f:link.typolink parameter="{settings.eventAddon.link}" class="{settings.eventAddon.class}"
+                             title="{settings.eventAddon.title}">
+                <img src="{f:uri.image(src: settings.eventAddon.file)}"
+                     alt="{settings.eventAddon.title}" title="{settings.eventAddon.title}">
             </f:link.typolink>
-        </f:alias>
-    </f:if>
-    <f:if condition="{settings.eventAddon}">
-        <f:link.typolink parameter="{settings.eventAddon.link}" class="{settings.eventAddon.class}"
-                         title="{settings.eventAddon.title}">
-            <img src="{f:uri.image(src: settings.eventAddon.file)}"
-                 alt="{settings.eventAddon.title}" title="{settings.eventAddon.title}">
-        </f:link.typolink>
-    </f:if>
-</div>
+        </f:if>
+        --></f:comment>
+    </div>
+
+</html>
