description item changes

Author: MrEssex

docs/pages/components/description-item.md

@@ -14,10 +14,11 @@ layout: component
     Margot Foster
   </zn-description-item>
   <zn-description-item label="Full name">
-    Margot Foster
+    margot.foster@example.com
   </zn-description-item>
   <zn-description-item label="Full name">
-    Margot Foster
+    lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
   </zn-description-item>
 </zn-sp>
 ```

src/components/description-item/description-item.scss

@@ -2,23 +2,34 @@
 
 :host {
   display: block;
+  container-type: inline-size;
 
   --zn-description-item-label-max-width: 300px;
 }
 
 .description-item {
   display: flex;
   flex-direction: row;
-  padding: var(--zn-spacing-medium);
+  padding: var(--zn-spacing-x-large) var(--zn-spacing-large);
 
   @include wc.container-query(null, md) {
+    --zn-description-item-label-max-width: 200px;
+  }
+
+  @include wc.container-query(null, smd) {
+    --zn-description-item-label-max-width: 150px;
+  }
+
+  @include wc.container-query(null, sm) {
     flex-direction: column;
+    gap: 10px;
   }
 
   &__label {
     font-weight: 500;
     color: rgb(var(--zn-text-heading));
     max-width: var(--zn-description-item-label-max-width);
     width: 100%;
+    flex-shrink: 0;
   }
 }