hr-design-system-handlebars 0.122.1 → 0.122.2

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# 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

package/dist/assets/index.css

@@ -2477,7 +2477,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1675088454678;
+  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: cnt1675088454678 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(cnt1675088454678);
+  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,9 +4003,9 @@ video {
     row-gap: 3.5rem;
   }
 
-  .md\:gap-x-4 {
-    -moz-column-gap: 1rem;
-         column-gap: 1rem;
+  .md\:gap-x-6 {
+    -moz-column-gap: 1.5rem;
+         column-gap: 1.5rem;
   }
 
   .md\:overflow-visible {
@@ -4235,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;
   }
@@ -4439,14 +4439,6 @@ video {
     width: 50%;
   }
 
-  .lg\:w-1\/3 {
-    width: 33.333333%;
-  }
-
-  .lg\:w-2\/3 {
-    width: 66.666667%;
-  }
-
   .lg\:w-42 {
     width: 10.5rem;
   }
@@ -4467,14 +4459,6 @@ video {
     flex: 0 1 auto;
   }
 
-  .lg\:basis-1\/3 {
-    flex-basis: 33.333333%;
-  }
-
-  .lg\:basis-2\/3 {
-    flex-basis: 66.666667%;
-  }
-
   .lg\:flex-row {
     flex-direction: row;
   }
@@ -4682,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,13 +1,13 @@
-<div class="flex flex-col {{~#if this.showFirstImageOrGenreImage}}{{~inline-switch this.realTeaserSize '["100"]' '[" md:flex-row md:gap-x-4"]'}}{{~/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="pb-5{{~inline-switch this.realTeaserSize '["100"]' '[" md:basis-1/2 lg:basis-1/3 md:w-1/2 lg:w-1/3 md:ar-1-1 md:pl-5"]'}}">
+        <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="pb-3{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:basis-1/2 lg:basis-1/3 md:w-1/2 lg:w-1/3 md:pl-5"]'}}">   
+                <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}}
@@ -18,9 +18,9 @@
     {{/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.showFirstImageOrGenreImage}}{{~inline-switch ../this.teaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2 lg:basis-2/3 md:w-1/2 lg:w-1/3"]'}}{{/if~}}">
+            <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 lg:basis-2/3 md:w-1/2 lg:w-2/3"]'}}{{/if~}}">
+            <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.showFirstImageOrGenreImage}}{{~inline-switch ../../this.teaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">

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.1",
+    "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,13 +1,13 @@
-<div class="flex flex-col {{~#if this.showFirstImageOrGenreImage}}{{~inline-switch this.realTeaserSize '["100"]' '[" md:flex-row md:gap-x-4"]'}}{{~/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="pb-5{{~inline-switch this.realTeaserSize '["100"]' '[" md:basis-1/2 lg:basis-1/3 md:w-1/2 lg:w-1/3 md:ar-1-1 md:pl-5"]'}}">
+        <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="pb-3{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:basis-1/2 lg:basis-1/3 md:w-1/2 lg:w-1/3 md:pl-5"]'}}">   
+                <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}}
@@ -18,9 +18,9 @@
     {{/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.showFirstImageOrGenreImage}}{{~inline-switch ../this.teaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2 lg:basis-2/3 md:w-1/2 lg:w-1/3"]'}}{{/if~}}">
+            <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 lg:basis-2/3 md:w-1/2 lg:w-2/3"]'}}{{/if~}}">
+            <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.showFirstImageOrGenreImage}}{{~inline-switch ../../this.teaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">

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}}