Avoid colliding of header badges in mobile view

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_badges.scss

@@ -80,9 +80,13 @@
   display: block;
   text-transform: uppercase;
   font-weight: 700;
-  font-size: 24px;
+  font-size: 12px;
   line-height: 1;
   padding-bottom: 4px;
+
+  @include mq($from: tablet) {
+    font-size: 24px;
+  }
 }
 
 .custom-badge__subtitle {

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_product.scss

@@ -61,9 +61,9 @@
 .product-header__badge {
   position: absolute;
   display: block;
-  @include size(160px);
-  top: 36px;
-  right: 8px;
+  @include size(100px);
+  top: 0;
+  right: 64px;
 
   &--skipass {
     width: 75px;
@@ -73,7 +73,7 @@
   }
 
   .custom-badge__title {
-    font-size: 20px;
+    font-size: 12px;
   }
 
   .custom-badge__subtitle {
@@ -82,6 +82,12 @@
 
   @include mq($from: tablet) {
     @include size(180px);
+
+    &--custom {
+      top: 36px;
+      right: 20%;
+    }
+
     .custom-badge__title {
       font-size: 22px;
     }