hr-design-system-handlebars 0.121.0 → 0.121.2

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v0.121.2 (Fri Jan 20 2023)
+
+#### 🐛 Bug Fix
+
+- DPE-1936 Ecken der Boxen anpasssen [#494](https://github.com/mumprod/hr-design-system-handlebars/pull/494) ([@Sunny1112358](https://github.com/Sunny1112358))
+
+#### Authors: 1
+
+- [@Sunny1112358](https://github.com/Sunny1112358)
+
+---
+
+# v0.121.1 (Fri Jan 20 2023)
+
+#### 🐛 Bug Fix
+
+- use realTeaserSize in ClusterTeaser [#493](https://github.com/mumprod/hr-design-system-handlebars/pull/493) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
 # v0.121.0 (Fri Jan 20 2023)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -1644,11 +1644,13 @@ video {
   border-top-right-radius: 0.25rem;
   border-bottom-right-radius: 0.25rem;
 }
-.rounded-tl-3xl {
-  border-top-left-radius: 1.5rem;
+.rounded-tl-hr {
+  border-top-left-radius: 0px;
+  border-top-left-radius: var(--border-radius-hr);
 }
-.rounded-br-3xl {
-  border-bottom-right-radius: 1.5rem;
+.rounded-br-hr {
+  border-bottom-right-radius: 0px;
+  border-bottom-right-radius: var(--border-radius-hr);
 }
 .rounded-tr-none {
   border-top-right-radius: 0px;
@@ -2481,7 +2483,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1674205599463;
+  counter-reset: cnt1674225670640;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2699,7 +2701,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1674205599463 1;
+  counter-increment: cnt1674225670640 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2715,7 +2717,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1674205599463);
+  content: counter(cnt1674225670640);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -2789,6 +2791,8 @@ video {
     --font-weight-title: 700;
     --font-titleCluster: RobotoSlab, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
     --font-weight-titleCluster: 700;
+    /* Border Radius */
+    --border-radius-hr: 0px; ;
 }
 [data-theme='hessenschau'] {
     --color-primary: #005293;
@@ -2849,6 +2853,8 @@ video {
     --font-weight-title: 400;
     --font-titleCluster: RobotoSlab, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
     --font-weight-titleCluster: 700;
+     /* Border */
+    --border-radius-hr: 1.5rem; 
 }
 [data-theme='hr-fernsehen'] {
     --color-primary: #a00d65;
@@ -3420,6 +3426,8 @@ video {
     /* Font */
     --font-title: RobotoCond, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
     --font-weight-title: 700;
+    /* Border */
+    --border-radius-hr: 1.5rem; 
 }
 [data-theme='you-fm'] {
     --color-primary: #c20016;
@@ -3639,11 +3647,13 @@ video {
 .before\:rounded-2xl::before {
   border-radius: 1rem;
 }
-.before\:rounded-tl-3xl::before {
-  border-top-left-radius: 1.5rem;
+.before\:rounded-tl-hr::before {
+  border-top-left-radius: 0px;
+  border-top-left-radius: var(--border-radius-hr);
 }
-.before\:rounded-br-3xl::before {
-  border-bottom-right-radius: 1.5rem;
+.before\:rounded-br-hr::before {
+  border-bottom-right-radius: 0px;
+  border-bottom-right-radius: var(--border-radius-hr);
 }
 .before\:pt-3\/4::before {
   padding-top: 75%;
@@ -4017,12 +4027,14 @@ video {
     border-radius: 0px;
   }
 
-  .md\:rounded-tl-3xl {
-    border-top-left-radius: 1.5rem;
+  .md\:rounded-tl-hr {
+    border-top-left-radius: 0px;
+    border-top-left-radius: var(--border-radius-hr);
   }
 
-  .md\:rounded-br-3xl {
-    border-bottom-right-radius: 1.5rem;
+  .md\:rounded-br-hr {
+    border-bottom-right-radius: 0px;
+    border-bottom-right-radius: var(--border-radius-hr);
   }
 
   .md\:border-0 {

package/dist/views/components/grid/grid_group_tabbed.hbs

@@ -1,5 +1,5 @@
 </div>
-<section class="grid grid-cols-12 px-8 py-8 mx-4 mt-6 bg-blue-400 sm:mx-0 rounded-tl-3xl rounded-br-3xl col-full sm:col-main gap-x-6 gap-y-6">
+<section class="grid grid-cols-12 px-8 py-8 mx-4 mt-6 bg-blue-400 sm:mx-0 rounded-tl-hr rounded-br-hr col-full sm:col-main gap-x-6 gap-y-6">
     {{> @partial-block }}
 </section>
 <div class="{{> components/grid/grid_group_wrapper_classes }}">

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

@@ -1,4 +1,4 @@
-<article class="mx-5 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-3xl rounded-br-3xl {{~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}}
@@ -14,7 +14,7 @@
     </div>
     {{~#with this.overviewLink}}
         {{~#if this.link~}}
-            <div class="flex mx-5 pb-9 pt-6 min-w-0 {{~inline-switch ../this.teaserSize '["100"]' '[" justify-center md:justify-end"," justify-center"]'}}">
+            <div class="flex mx-5 pb-9 pt-6 min-w-0 {{~inline-switch ../this.realTeaserSize '["100"]' '[" justify-center md:justify-end"," justify-center"]'}}">
                 {{~> components/button/button_pseudo _type="hollow" _addClass="h-4 w-4 ml-2 fill-current" _showIcon="true" _icon="arrow-right" _withLink=true _buttonText=this.title _buttonCss="truncate" _linkCss="flex min-w-0"~}}
             </div>
         {{~/if~}}

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

@@ -1,15 +1,15 @@
-<div class="{{~#if this.showFirstImageOrGenreImage}}{{~inline-switch this.teaserSize '["100"]' '[" md:flex md:flex-row"]'}}{{~/if~}}">
+<div class="{{~#if this.showFirstImageOrGenreImage}}{{~inline-switch this.realTeaserSize '["100"]' '[" md:flex md:flex-row"]'}}{{~/if~}}">
     {{~#if this.showGenreImage}}
-        <div class="px-0 pb-5 {{~inline-switch this.teaserSize '["100"]' '[" md:pl-5 md:basis-1/2 lg:basis-1/3 md:ar-1-1"]'}}">
+        <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>
     {{~/if~}}
     {{~#if this.showFirstImage}}
         {{~#with this.firstEntry~}}
             {{~#if this.teaserImage}}
-                <div class="px-0 pb-3 {{~inline-switch ../this.teaserSize '["100"]' '[" md:pl-5 md:basis-1/2 lg:basis-1/3"]'}}">   
+                <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.teaserSize '["100"]' '[" md:mx-0"]'}}">
+                    <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>   

package/dist/views/components/teaser/podcast/podcast-playlist.hbs

@@ -1,4 +1,4 @@
-<div class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-5 sm:mx-0 md:pt-5 bg-highlight-1 rounded-tl-3xl rounded-br-3xl col-span-12{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" >
+<div class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-5 sm:mx-0 md:pt-5 bg-highlight-1 rounded-tl-hr rounded-br-hr col-span-12{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" >
     {{> components/teaser/podcast/podcast_playlist_player _linkTitle="true" _isSinglePage=false _type="podcastPlaylistPlayerTeaser" }}
 </div>
 

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

@@ -1,3 +1,3 @@
-<div class="relative grid flex-col col-span-12 mx-5 sm:mx-0 gap-y-6 gap-x-4 bg-highlight-1 rounded-tl-3xl rounded-br-3xl{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" > 
+<div class="relative grid flex-col col-span-12 mx-5 sm:mx-0 gap-y-6 gap-x-4 bg-highlight-1 rounded-tl-hr rounded-br-hr{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" > 
     {{> components/teaser/podcast/podcast_player _linkTitle="true" _isSinglePage=true _type="podcastEpisodePlayerTeaser" }}
 </div>

package/dist/views/components/teaser/tabbox/teaser_tabbox.hbs

@@ -2,7 +2,7 @@
 <div 
   x-cloak 
   x-data="{ tab: '{{this.tabbedGroup.[0].title}}' }"
-  class="grid grid-cols-12 pt-6 mx-0 mb-8 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-3xl md:rounded-br-3xl md:col-main gap-x-6 gap-y-6"
+  class="grid grid-cols-12 pt-6 mx-0 mb-8 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-hr md:rounded-br-hr md:col-main gap-x-6 gap-y-6"
 >
   <section class="px-0 col-span-full sm:px-8 md:px-0" data-hr-group-tabbed='{"wandaPageId":"{{this.wandaPageId}}"}'>
     <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">

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

@@ -1,9 +1,9 @@
 <article class="mx-5 sm:mx-0 relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.realTeaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
     <figure class="ar-1-1" aria-hidden="true">
-        {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-3xl rounded-br-3xl" ~}}
+        {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-hr rounded-br-hr" ~}}
     </figure> 
-    <div class="absolute flex flex-col justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-3xl rounded-br-3xl" aria-hidden="true">
-        {{#decorator 'components/base/link' _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-3xl before:rounded-br-3xl hover:text-toplineColor"}} 
+    <div class="absolute flex flex-col justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-hr rounded-br-hr" aria-hidden="true">
+        {{#decorator 'components/base/link' _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-hr before:rounded-br-hr hover:text-toplineColor"}} 
             {{> components/teaser/components/teaser_heading 
             _headlineTag="h2" 
             _headlineCss="text-shadow text-center text-white mb-4 mx-4 md:mb-8 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8 line-clamp-4 xs:line-clamp-6 md:line-clamp-4 lg:line-clamp-5" 

package/package.json

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

package/src/assets/tailwind.css

@@ -67,6 +67,8 @@
     --font-weight-title: theme('fontWeight.bold');
     --font-titleCluster: theme('fontFamily.headingSerif');
     --font-weight-titleCluster: theme('fontWeight.bold');
+    /* Border Radius */
+    --border-radius-hr: theme('borderRadius.none'); ;
 }
 
 [data-theme='hessenschau'] {
@@ -128,6 +130,8 @@
     --font-weight-title: theme('fontWeight.normal');
     --font-titleCluster: theme('fontFamily.headingSerif');
     --font-weight-titleCluster: theme('fontWeight.bold');
+     /* Border */
+    --border-radius-hr: theme('borderRadius.3xl'); 
 }
 
 [data-theme='hr-fernsehen'] {
@@ -710,6 +714,8 @@
     /* Font */
     --font-title: theme('fontFamily.heading');
     --font-weight-title: theme('fontWeight.bold');
+    /* Border */
+    --border-radius-hr: theme('borderRadius.3xl'); 
 }
 
 [data-theme='you-fm'] {

package/src/stories/views/components/grid/grid_group_tabbed.hbs

@@ -1,5 +1,5 @@
 </div>
-<section class="grid grid-cols-12 px-8 py-8 mx-4 mt-6 bg-blue-400 sm:mx-0 rounded-tl-3xl rounded-br-3xl col-full sm:col-main gap-x-6 gap-y-6">
+<section class="grid grid-cols-12 px-8 py-8 mx-4 mt-6 bg-blue-400 sm:mx-0 rounded-tl-hr rounded-br-hr col-full sm:col-main gap-x-6 gap-y-6">
     {{> @partial-block }}
 </section>
 <div class="{{> components/grid/grid_group_wrapper_classes }}">

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

@@ -1,4 +1,4 @@
-<article class="mx-5 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-3xl rounded-br-3xl {{~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}}
@@ -14,7 +14,7 @@
     </div>
     {{~#with this.overviewLink}}
         {{~#if this.link~}}
-            <div class="flex mx-5 pb-9 pt-6 min-w-0 {{~inline-switch ../this.teaserSize '["100"]' '[" justify-center md:justify-end"," justify-center"]'}}">
+            <div class="flex mx-5 pb-9 pt-6 min-w-0 {{~inline-switch ../this.realTeaserSize '["100"]' '[" justify-center md:justify-end"," justify-center"]'}}">
                 {{~> components/button/button_pseudo _type="hollow" _addClass="h-4 w-4 ml-2 fill-current" _showIcon="true" _icon="arrow-right" _withLink=true _buttonText=this.title _buttonCss="truncate" _linkCss="flex min-w-0"~}}
             </div>
         {{~/if~}}

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

@@ -1,15 +1,15 @@
-<div class="{{~#if this.showFirstImageOrGenreImage}}{{~inline-switch this.teaserSize '["100"]' '[" md:flex md:flex-row"]'}}{{~/if~}}">
+<div class="{{~#if this.showFirstImageOrGenreImage}}{{~inline-switch this.realTeaserSize '["100"]' '[" md:flex md:flex-row"]'}}{{~/if~}}">
     {{~#if this.showGenreImage}}
-        <div class="px-0 pb-5 {{~inline-switch this.teaserSize '["100"]' '[" md:pl-5 md:basis-1/2 lg:basis-1/3 md:ar-1-1"]'}}">
+        <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>
     {{~/if~}}
     {{~#if this.showFirstImage}}
         {{~#with this.firstEntry~}}
             {{~#if this.teaserImage}}
-                <div class="px-0 pb-3 {{~inline-switch ../this.teaserSize '["100"]' '[" md:pl-5 md:basis-1/2 lg:basis-1/3"]'}}">   
+                <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.teaserSize '["100"]' '[" md:mx-0"]'}}">
+                    <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>   

package/src/stories/views/components/teaser/podcast/podcast-playlist.hbs

@@ -1,4 +1,4 @@
-<div class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-5 sm:mx-0 md:pt-5 bg-highlight-1 rounded-tl-3xl rounded-br-3xl col-span-12{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" >
+<div class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-5 sm:mx-0 md:pt-5 bg-highlight-1 rounded-tl-hr rounded-br-hr col-span-12{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" >
     {{> components/teaser/podcast/podcast_playlist_player _linkTitle="true" _isSinglePage=false _type="podcastPlaylistPlayerTeaser" }}
 </div>
 

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

@@ -1,3 +1,3 @@
-<div class="relative grid flex-col col-span-12 mx-5 sm:mx-0 gap-y-6 gap-x-4 bg-highlight-1 rounded-tl-3xl rounded-br-3xl{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" > 
+<div class="relative grid flex-col col-span-12 mx-5 sm:mx-0 gap-y-6 gap-x-4 bg-highlight-1 rounded-tl-hr rounded-br-hr{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" > 
     {{> components/teaser/podcast/podcast_player _linkTitle="true" _isSinglePage=true _type="podcastEpisodePlayerTeaser" }}
 </div>

package/src/stories/views/components/teaser/tabbox/teaser_tabbox.hbs

@@ -2,7 +2,7 @@
 <div 
   x-cloak 
   x-data="{ tab: '{{this.tabbedGroup.[0].title}}' }"
-  class="grid grid-cols-12 pt-6 mx-0 mb-8 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-3xl md:rounded-br-3xl md:col-main gap-x-6 gap-y-6"
+  class="grid grid-cols-12 pt-6 mx-0 mb-8 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-hr md:rounded-br-hr md:col-main gap-x-6 gap-y-6"
 >
   <section class="px-0 col-span-full sm:px-8 md:px-0" data-hr-group-tabbed='{"wandaPageId":"{{this.wandaPageId}}"}'>
     <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">

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

@@ -1,9 +1,9 @@
 <article class="mx-5 sm:mx-0 relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.realTeaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
     <figure class="ar-1-1" aria-hidden="true">
-        {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-3xl rounded-br-3xl" ~}}
+        {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-hr rounded-br-hr" ~}}
     </figure> 
-    <div class="absolute flex flex-col justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-3xl rounded-br-3xl" aria-hidden="true">
-        {{#decorator 'components/base/link' _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-3xl before:rounded-br-3xl hover:text-toplineColor"}} 
+    <div class="absolute flex flex-col justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-hr rounded-br-hr" aria-hidden="true">
+        {{#decorator 'components/base/link' _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-hr before:rounded-br-hr hover:text-toplineColor"}} 
             {{> components/teaser/components/teaser_heading 
             _headlineTag="h2" 
             _headlineCss="text-shadow text-center text-white mb-4 mx-4 md:mb-8 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8 line-clamp-4 xs:line-clamp-6 md:line-clamp-4 lg:line-clamp-5" 

package/tailwind.config.js

@@ -38,6 +38,9 @@ module.exports = {
         },
 
         extend: {
+            borderRadius: {
+                hr: 'var(--border-radius-hr)',
+            },
             fontSize: {
                 'xs': ['0.75rem', '1.063rem'],
                 'sm': ['0.875rem', '1.188rem'],