Fix colliding badges in herounit slider on frontpage

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_herounit.scss

@@ -2,33 +2,18 @@
     @apply relative w-full max-w-screen-2xl mx-auto overflow-hidden;
 }
 
+.herounit__badge-wrapper {
+    @apply absolute top-0 right-0 lg:right-32 w-full px-4 md:w-auto md:px-0 flex flex-row-reverse justify-between md:flex-col md:items-center md:space-y-4;
+}
+
 .herounit__badge {
-    @apply absolute bg-badge-gradient text-white py-8 px-2;
+    @apply text-white;
 
     &--skipass {
-        top: 0;
+        @apply bg-badge-gradient py-8 px-2;
-        right: 16px;
-        @screen lg {
-            right: 90px;
-        }
     }
 
     &--custom {
-        width: 200px;
+        @apply mt-4 w-40 transform rotate-6;
-        height: 200px;
-        top: 16px;
-        right: auto;
-        left: 16px;
-
-        @screen md {
-            top: 45px;
-            left: auto;
-            right: 17%;
-        }
-
-        @screen lg {
-            top: 75px;
-            right: 20%;
-        }
     }
 }

public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html

@@ -41,6 +41,8 @@
                                     </div>
                                 </div>
                             </div>
+                            <f:if condition="{slide.skipass} || {badge}">
+                                <div class="herounit__badge-wrapper">
                                     <f:if condition="{slide.skipass}">
                                         <f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive" class="herounit__badge herounit__badge--skipass">
                                             <p class="uppercase text-4xl font-bold leading-7 mb-2">Ski-<br>Pass</p>
@@ -51,7 +53,7 @@
                                         <f:alias map="{badgeData: badge.0.data}">
                                             <f:link.typolink parameter="{badgeData.link}"
                                                              title="{badgeData.title}"
-                                                     class="hidden md:block absolute top-0 right-0 mt-12 mr-8 w-40 transform rotate-6">
+                                                             class="herounit__badge herounit__badge--custom">
                                                 <svg viewBox="0 0 200 200"
                                                      xmlns="http://www.w3.org/2000/svg"
                                                      preserveAspectRatio="xMinYMin meet"
@@ -73,6 +75,8 @@
                                         </f:alias>
                                     </f:if>
                                 </div>
+                            </f:if>
+                        </div>
                     </li>
                 </f:for>
             </ul>