hr-design-system-handlebars 0.122.0 → 0.122.2

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v0.122.2 (Tue Jan 31 2023)
+
+#### 🐛 Bug Fix
+
+- DPE-2048 - Flexbox percentage problem fix [#511](https://github.com/mumprod/hr-design-system-handlebars/pull/511) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v0.122.1 (Mon Jan 30 2023)
+
+#### 🐛 Bug Fix
+
+- DPE-2044 [#510](https://github.com/mumprod/hr-design-system-handlebars/pull/510) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v0.122.0 (Fri Jan 27 2023)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -2477,7 +2477,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1674837755593;
+  counter-reset: cnt1675161117189;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2695,7 +2695,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1674837755593 1;
+  counter-increment: cnt1675161117189 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2711,7 +2711,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1674837755593);
+  content: counter(cnt1675161117189);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -2721,6 +2721,12 @@ video {
         text-shadow: 1px 1px 2px #000000;
         text-shadow: 1px 1px 2px var(--color-text-shadow, #000000);
     }
+/*! *********************************************************/
+/*! Prozentuale Breite bei Flexbox bei gleichzeitigem       */
+/*! nutzen von column-gap funktioniert nicht richtig.       */
+/*! Deshalb hier eine übergangslösung dafür.                */
+/*! Langfristig sollten die Teaser auf Grid umgebaut werden */
+/*! *********************************************************/
 .\[-T\:\+Z\] {
   --t: +Z;
 }
@@ -3937,14 +3943,6 @@ video {
     width: 10rem;
   }
 
-  .md\:w-2\/3 {
-    width: 66.666667%;
-  }
-
-  .md\:w-1\/3 {
-    width: 33.333333%;
-  }
-
   .md\:w-full {
     width: 100%;
   }
@@ -3985,18 +3983,6 @@ video {
     flex: 1 1 auto;
   }
 
-  .md\:basis-2\/3 {
-    flex-basis: 66.666667%;
-  }
-
-  .md\:basis-1\/3 {
-    flex-basis: 33.333333%;
-  }
-
-  .md\:basis-1\/2 {
-    flex-basis: 50%;
-  }
-
   .md\:basis-full {
     flex-basis: 100%;
   }
@@ -4017,6 +4003,11 @@ video {
     row-gap: 3.5rem;
   }
 
+  .md\:gap-x-6 {
+    -moz-column-gap: 1.5rem;
+         column-gap: 1.5rem;
+  }
+
   .md\:overflow-visible {
     overflow: visible;
   }
@@ -4112,14 +4103,14 @@ video {
     padding-left: 1.25rem;
   }
 
-  .md\:pt-5 {
-    padding-top: 1.25rem;
-  }
-
   .md\:pr-5 {
     padding-right: 1.25rem;
   }
 
+  .md\:pt-5 {
+    padding-top: 1.25rem;
+  }
+
   .md\:pr-0 {
     padding-right: 0px;
   }
@@ -4230,7 +4221,21 @@ video {
     .md\:col-main {
         grid-column: main;
     }
-
+    .md\:basis-1\/3-gap-6 {
+        --gap: 1.5rem; 
+        width:calc((100% - (2 * var(--gap))) / 3 ) ;
+        flex-basis:calc((100% - (2 * var(--gap))) / 3 )
+    }
+    .md\:basis-2\/3-gap-6 {
+        --gap: 1.5rem; 
+        width:calc((((100% - (2 * var(--gap))) / 3 ) * 2) + var(--gap));
+        flex-basis:calc((((100% - (2 * var(--gap))) / 3 ) * 2) + var(--gap))
+    }
+    .md\:basis-1\/2-gap-6 {
+        --gap: 1.5rem; 
+        width:calc((100% - var(--gap)) / 2 ); 
+        flex-basis:calc((100% - var(--gap)) / 2 ) 
+    }
     .md\:first-of-type\:pt-0:first-of-type {
     padding-top: 0px;
   }
@@ -4454,10 +4459,6 @@ video {
     flex: 0 1 auto;
   }
 
-  .lg\:basis-1\/3 {
-    flex-basis: 33.333333%;
-  }
-
   .lg\:flex-row {
     flex-direction: row;
   }
@@ -4665,44 +4666,44 @@ video {
     .lg\:col-main {
         grid-column: main;
     }
-
+    .lg\:basis-1\/3-gap-6 {
+        --gap: 1.5rem; 
+        width:calc((100% - (2 * var(--gap))) / 3 ) ;
+        flex-basis:calc((100% - (2 * var(--gap))) / 3 )
+    }
+    .lg\:basis-2\/3-gap-6 {
+        --gap: 1.5rem; 
+        width:calc((((100% - (2 * var(--gap))) / 3 ) * 2) + var(--gap));
+        flex-basis:calc((((100% - (2 * var(--gap))) / 3 ) * 2) + var(--gap))
+    }
     .first\:lg\:-ml-4:first-child {
     margin-left: -1rem;
   }
-
     .lg\:first\:border-t-0:first-child {
     border-top-width: 0px;
   }
-
     .lg\:first\:pl-0:first-child {
     padding-left: 0px;
   }
-
     .lg\:first\:font-normal:first-child {
     font-weight: 400;
   }
-
     .lg\:last\:border-0:last-child {
     border-width: 0px;
   }
-
     .lg\:odd\:pr-4:nth-child(odd) {
     padding-right: 1rem;
   }
-
     .lg\:even\:pl-4:nth-child(even) {
     padding-left: 1rem;
   }
-
     .lg\:first-of-type\:pl-0:first-of-type {
     padding-left: 0px;
   }
-
     .lg\:hover\:underline:hover {
     -webkit-text-decoration-line: underline;
             text-decoration-line: underline;
   }
-
     .lg\:after\:relative::after {
     position: relative;
   }

package/dist/views/components/teaser/cluster/teaser_cluster.hbs

@@ -1,4 +1,4 @@
-<article class="mx-5 md:mx-0  col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr {{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
+<article class="mx-5 md:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
     <div class="">
             <h2 class="flex items-center px-5 py-5 text-clusterTeaserHeadline">
                 {{#if this.teaserLogo}}

package/dist/views/components/teaser/cluster/teaser_cluster_list.hbs

@@ -1,15 +1,15 @@
-<div class="{{~#if this.showFirstImageOrGenreImage}}{{~inline-switch this.realTeaserSize '["100"]' '[" md:flex md:flex-row"]'}}{{~/if~}}">
+<div class="flex flex-col {{~#if this.showFirstImageOrGenreImage}}{{~inline-switch this.realTeaserSize '["100"]' '[" md:flex-row md:gap-x-6"]'}}{{~/if~}}">
     {{~#if this.showGenreImage}}
-        <div class="px-0 pb-5 {{~inline-switch this.realTeaserSize '["100"]' '[" md:pl-5 md:basis-1/2 lg:basis-1/3 md:ar-1-1"]'}}">
-            {{~> components/base/image/responsive_image this.genreImage _type=this.teaserType _variant=this.imageVariant _addClass=this.aspectRatio _addClassImg="w-full" ~}}
+        <div class="pb-5{{~inline-switch this.realTeaserSize '["100"]' '[" md:basis-1/2-gap-6 lg:basis-1/3-gap-6 md:ar-1-1 md:pl-5"]'}}">
+            {{~> components/base/image/responsive_image this.genreImage _type=this.teaserType _variant=this.imageVariant _addClass=this.aspectRatio ~}}
         </div>
     {{~/if~}}
     {{~#if this.showFirstImage}}
         {{~#with this.firstEntry~}}
             {{~#if this.teaserImage}}
-                <div class="px-0 pb-3 {{~inline-switch ../this.realTeaserSize '["100"]' '[" md:pl-5 md:basis-1/2 lg:basis-1/3"]'}}">   
-                    {{~> components/base/image/responsive_image this.teaserImage _type=../this.teaserType _variant=../this.imageVariant _addClass=../this.aspectRatio _addClassImg="w-full" ~}}
-                    <div class="mx-5 mt-3 {{~inline-switch ../this.realTeaserSize '["100"]' '[" md:mx-0"]'}}">
+                <div class="pb-3{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:basis-1/2-gap-6 lg:basis-1/3-gap-6 md:pl-5"]'}}">   
+                    {{~> components/base/image/responsive_image this.teaserImage _type=../this.teaserType _variant=../this.imageVariant _addClass=../this.aspectRatio ~}}
+                    <div class="mx-5 mt-3{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:mx-0"]'}}">
                         {{> components/teaser/cluster/teaser_cluster_item _size=../this.realTeaserSize _ordered=../this.isOrdered _firstItem=true}}
                     </div> 
                 </div>   
@@ -17,9 +17,13 @@
         {{~/with~}}
     {{/if~}}
     {{~#with this.clusterTeaserItems}}
-        {{~#if ../this.isOrdered}}<ol class="mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white {{~#if ../this.showGenreImage}}{{~inline-switch ../this.teaserSize '["100"]' '[" md:-pt-5 md:border-none"]'}}{{/if~}}">{{else}}<ul class="mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showGenreImage}}{{~inline-switch ../this.teaserSize '["100"]' '[" md:-pt-5 md:border-none"]'}}{{/if~}}">{{/if}}
+        {{~#if ../this.isOrdered}}
+            <ol class="mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.teaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+        {{else}}
+            <ul class="mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.teaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+        {{/if}}
             {{~#each this~}}
-                <li class="{{~#if ../../this.isOrdered}} -ordered {{/if}} py-3 {{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}} {{~#if ../../this.showGenreImage}}{{~inline-switch ../../this.teaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
+                <li class="{{~#if ../../this.isOrdered}}-ordered{{/if}} py-3{{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}}{{~#if ../../this.showFirstImageOrGenreImage}}{{~inline-switch ../../this.teaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
                     {{> components/teaser/cluster/teaser_cluster_item _size=../this.realTeaserSize _ordered=../../this.isOrdered }} 
                 </li>
             {{~/each}}

package/dist/views/components/teaser/teaser_alternativ.hbs

@@ -1,18 +1,18 @@
-<article class="items-start relative col-span-12 flex md:flex-row gap-y-3 gap-x-4 sm:px-0{{#unless this.isEvent}}{{~inline-switch this.teaserSize '["hero","100","50"]' '[" flex-col"," px-5 md:flex-row"," md:col-span-6 px-5 md:flex-row"]'~}}{{else}} items-start flex-col{{/unless}}"
+<article class="items-start relative col-span-12 flex md:flex-row gap-y-3 gap-x-4 md:gap-x-6 sm:px-0{{#unless this.isEvent}}{{~inline-switch this.teaserSize '["hero","100","50"]' '[" flex-col"," px-5 md:flex-row"," md:col-span-6 px-5 md:flex-row"]'~}}{{else}} items-start flex-col{{/unless}}"
     x-data="{ avStart: false }"
     {{#if this.isMobile1to1}}
             :class="avStart ? 'flex-col' : 'flex-row'"
     {{/if}} 
     >
     {{#if this.teaserImage}}
-        <figure class="relative {{~inline-switch this.realTeaserSize '["hero","100","50"]' '[" basis-full w-full md:basis-2/3 md:w-2/3 ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5  md:basis-1/3 md:w-1/3"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/2 md:w-1/2"]'~}}"
+        <figure class="relative {{~inline-switch this.realTeaserSize '["hero","100","50"]' '[" basis-full w-full md:basis-2/3-gap-6  ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/3-gap-6"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/2-gap-6"]'~}}"
             {{#if this.isMobile1to1}}
                 :class="{'ar-16-9 basis-full w-full' : avStart, 'ar-1-1 basis-2/5 w-2/5': !avStart}"
             {{/if}}
         >
             {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.realTeaserSize _teaserType=this.teaserType _aspectRatio=(inline-switch this.realTeaserSize '["hero"]' '["ar-16-9","ar-1-1 md:ar-16-9"]') }} 
         </figure>
-        {{> components/teaser/components/teaser_body _outerCssClasses=(inline-switch this.realTeaserSize '["hero","100","50"]' '["basis-full w-full md:basis-1/3 md:w-1/3"," basis-3/5 w-3/5 md:basis-2/3 md:w-2/3"," basis-3/5 w-3/5 md:basis-1/2 md:w-1/2"]') }}
+        {{> components/teaser/components/teaser_body _outerCssClasses=(inline-switch this.realTeaserSize '["hero","100","50"]' '["basis-full w-full md:basis-1/3-gap-6"," basis-3/5 w-3/5 md:basis-2/3-gap-6"," basis-3/5 w-3/5 md:basis-1/2-gap-6"]') }}
     {{else}}
         {{> components/teaser/components/teaser_body _outerCssClasses="basis-full" }}
     {{/if}}

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "0.122.0",
+    "version": "0.122.2",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",

package/src/assets/css/custom-utilities.css

@@ -105,4 +105,64 @@
         --color-text-shadow: theme('colors.black.DEFAULT');
         text-shadow: 1px 1px 2px var(--color-text-shadow, theme('colors.black.DEFAULT'));
     }
+
+    /*! *********************************************************/
+    /*! Prozentuale Breite bei Flexbox bei gleichzeitigem       */ 
+    /*! nutzen von column-gap funktioniert nicht richtig.       */
+    /*! Deshalb hier eine übergangslösung dafür.                */
+    /*! Langfristig sollten die Teaser auf Grid umgebaut werden */
+    /*! *********************************************************/
+ 
+    .basis-1\/3-gap-4 {
+        --gap: 1rem; 
+        width:calc((100% - (2 * var(--gap))) / 3 ); 
+        flex-basis:calc((100% - (2 * var(--gap))) / 3 )
+    }
+    .basis-2\/3-gap-4 {
+        --gap: 1rem; 
+        width:calc((((100% - (2 * var(--gap))) / 3 ) * 2) + var(--gap));
+        flex-basis:calc((((100% - (2 * var(--gap))) / 3 ) * 2) + var(--gap))
+    }
+    .basis-1\/2-gap-4 {
+        --gap: 1rem; 
+        width:calc((100% - var(--gap)) / 2 ) ;
+        flex-basis:calc((100% - var(--gap)) / 2 ) 
+    }
+    .basis-1\/4-gap-4 {
+        --gap: 1rem; 
+        width:calc((100% - (4 * var(--gap))) / 4 ) ;
+        flex-basis:calc((100% - (4 * var(--gap))) / 4 ) 
+    }
+
+    .basis-3\/4-gap-4 {
+        --gap: 1rem; 
+        width:calc((((100% - (4 * var(--gap))) / 4 ) * 3) + var(--gap));
+        flex-basis:calc((((100% - (4 * var(--gap))) / 4 ) * 3) + var(--gap))
+    }
+    .basis-1\/3-gap-6 {
+        --gap: 1.5rem; 
+        width:calc((100% - (2 * var(--gap))) / 3 ) ;
+        flex-basis:calc((100% - (2 * var(--gap))) / 3 )
+    }
+    .basis-2\/3-gap-6 {
+        --gap: 1.5rem; 
+        width:calc((((100% - (2 * var(--gap))) / 3 ) * 2) + var(--gap));
+        flex-basis:calc((((100% - (2 * var(--gap))) / 3 ) * 2) + var(--gap))
+    }
+    .basis-1\/2-gap-6 {
+        --gap: 1.5rem; 
+        width:calc((100% - var(--gap)) / 2 ); 
+        flex-basis:calc((100% - var(--gap)) / 2 ) 
+    }
+    .basis-1\/4-gap-6 {
+        --gap: 1.5rem; 
+        width:calc((100% - (4 * var(--gap))) / 4 );
+        flex-basis:calc((100% - (4 * var(--gap))) / 4 ) 
+    }
+    .basis-3\/4-gap-6 {
+        --gap: 1.5rem; 
+        width:calc((((100% - (4 * var(--gap))) / 4 ) * 3) + var(--gap));
+        flex-basis:calc((((100% - (4 * var(--gap))) / 4 ) * 3) + var(--gap))
+    }
+
 }

package/src/stories/views/components/teaser/cluster/teaser_cluster.hbs

@@ -1,4 +1,4 @@
-<article class="mx-5 md:mx-0  col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr {{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
+<article class="mx-5 md:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
     <div class="">
             <h2 class="flex items-center px-5 py-5 text-clusterTeaserHeadline">
                 {{#if this.teaserLogo}}

package/src/stories/views/components/teaser/cluster/teaser_cluster_list.hbs

@@ -1,15 +1,15 @@
-<div class="{{~#if this.showFirstImageOrGenreImage}}{{~inline-switch this.realTeaserSize '["100"]' '[" md:flex md:flex-row"]'}}{{~/if~}}">
+<div class="flex flex-col {{~#if this.showFirstImageOrGenreImage}}{{~inline-switch this.realTeaserSize '["100"]' '[" md:flex-row md:gap-x-6"]'}}{{~/if~}}">
     {{~#if this.showGenreImage}}
-        <div class="px-0 pb-5 {{~inline-switch this.realTeaserSize '["100"]' '[" md:pl-5 md:basis-1/2 lg:basis-1/3 md:ar-1-1"]'}}">
-            {{~> components/base/image/responsive_image this.genreImage _type=this.teaserType _variant=this.imageVariant _addClass=this.aspectRatio _addClassImg="w-full" ~}}
+        <div class="pb-5{{~inline-switch this.realTeaserSize '["100"]' '[" md:basis-1/2-gap-6 lg:basis-1/3-gap-6 md:ar-1-1 md:pl-5"]'}}">
+            {{~> components/base/image/responsive_image this.genreImage _type=this.teaserType _variant=this.imageVariant _addClass=this.aspectRatio ~}}
         </div>
     {{~/if~}}
     {{~#if this.showFirstImage}}
         {{~#with this.firstEntry~}}
             {{~#if this.teaserImage}}
-                <div class="px-0 pb-3 {{~inline-switch ../this.realTeaserSize '["100"]' '[" md:pl-5 md:basis-1/2 lg:basis-1/3"]'}}">   
-                    {{~> components/base/image/responsive_image this.teaserImage _type=../this.teaserType _variant=../this.imageVariant _addClass=../this.aspectRatio _addClassImg="w-full" ~}}
-                    <div class="mx-5 mt-3 {{~inline-switch ../this.realTeaserSize '["100"]' '[" md:mx-0"]'}}">
+                <div class="pb-3{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:basis-1/2-gap-6 lg:basis-1/3-gap-6 md:pl-5"]'}}">   
+                    {{~> components/base/image/responsive_image this.teaserImage _type=../this.teaserType _variant=../this.imageVariant _addClass=../this.aspectRatio ~}}
+                    <div class="mx-5 mt-3{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:mx-0"]'}}">
                         {{> components/teaser/cluster/teaser_cluster_item _size=../this.realTeaserSize _ordered=../this.isOrdered _firstItem=true}}
                     </div> 
                 </div>   
@@ -17,9 +17,13 @@
         {{~/with~}}
     {{/if~}}
     {{~#with this.clusterTeaserItems}}
-        {{~#if ../this.isOrdered}}<ol class="mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white {{~#if ../this.showGenreImage}}{{~inline-switch ../this.teaserSize '["100"]' '[" md:-pt-5 md:border-none"]'}}{{/if~}}">{{else}}<ul class="mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showGenreImage}}{{~inline-switch ../this.teaserSize '["100"]' '[" md:-pt-5 md:border-none"]'}}{{/if~}}">{{/if}}
+        {{~#if ../this.isOrdered}}
+            <ol class="mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.teaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+        {{else}}
+            <ul class="mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.teaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+        {{/if}}
             {{~#each this~}}
-                <li class="{{~#if ../../this.isOrdered}} -ordered {{/if}} py-3 {{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}} {{~#if ../../this.showGenreImage}}{{~inline-switch ../../this.teaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
+                <li class="{{~#if ../../this.isOrdered}}-ordered{{/if}} py-3{{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}}{{~#if ../../this.showFirstImageOrGenreImage}}{{~inline-switch ../../this.teaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
                     {{> components/teaser/cluster/teaser_cluster_item _size=../this.realTeaserSize _ordered=../../this.isOrdered }} 
                 </li>
             {{~/each}}

package/src/stories/views/components/teaser/teaser_alternativ.hbs

@@ -1,18 +1,18 @@
-<article class="items-start relative col-span-12 flex md:flex-row gap-y-3 gap-x-4 sm:px-0{{#unless this.isEvent}}{{~inline-switch this.teaserSize '["hero","100","50"]' '[" flex-col"," px-5 md:flex-row"," md:col-span-6 px-5 md:flex-row"]'~}}{{else}} items-start flex-col{{/unless}}"
+<article class="items-start relative col-span-12 flex md:flex-row gap-y-3 gap-x-4 md:gap-x-6 sm:px-0{{#unless this.isEvent}}{{~inline-switch this.teaserSize '["hero","100","50"]' '[" flex-col"," px-5 md:flex-row"," md:col-span-6 px-5 md:flex-row"]'~}}{{else}} items-start flex-col{{/unless}}"
     x-data="{ avStart: false }"
     {{#if this.isMobile1to1}}
             :class="avStart ? 'flex-col' : 'flex-row'"
     {{/if}} 
     >
     {{#if this.teaserImage}}
-        <figure class="relative {{~inline-switch this.realTeaserSize '["hero","100","50"]' '[" basis-full w-full md:basis-2/3 md:w-2/3 ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5  md:basis-1/3 md:w-1/3"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/2 md:w-1/2"]'~}}"
+        <figure class="relative {{~inline-switch this.realTeaserSize '["hero","100","50"]' '[" basis-full w-full md:basis-2/3-gap-6  ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/3-gap-6"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/2-gap-6"]'~}}"
             {{#if this.isMobile1to1}}
                 :class="{'ar-16-9 basis-full w-full' : avStart, 'ar-1-1 basis-2/5 w-2/5': !avStart}"
             {{/if}}
         >
             {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.realTeaserSize _teaserType=this.teaserType _aspectRatio=(inline-switch this.realTeaserSize '["hero"]' '["ar-16-9","ar-1-1 md:ar-16-9"]') }} 
         </figure>
-        {{> components/teaser/components/teaser_body _outerCssClasses=(inline-switch this.realTeaserSize '["hero","100","50"]' '["basis-full w-full md:basis-1/3 md:w-1/3"," basis-3/5 w-3/5 md:basis-2/3 md:w-2/3"," basis-3/5 w-3/5 md:basis-1/2 md:w-1/2"]') }}
+        {{> components/teaser/components/teaser_body _outerCssClasses=(inline-switch this.realTeaserSize '["hero","100","50"]' '["basis-full w-full md:basis-1/3-gap-6"," basis-3/5 w-3/5 md:basis-2/3-gap-6"," basis-3/5 w-3/5 md:basis-1/2-gap-6"]') }}
     {{else}}
         {{> components/teaser/components/teaser_body _outerCssClasses="basis-full" }}
     {{/if}}