diff --git a/docs/pages/components/modal.md b/docs/pages/components/modal.md
index a8e21eb..c8ca358 100644
--- a/docs/pages/components/modal.md
+++ b/docs/pages/components/modal.md
@@ -79,7 +79,8 @@ Use the `sm` or `lg` classes to reduce or increase the maximum width of the moda
           <svg viewBox="0 0 24 24" class="icon"><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
         </a>
       </header>
-      <fieldset>
+      <fieldset class="bg-page p-8">
+        <label>Login</label>
         <input class="lg" type="email" placeholder="Email" />
         <input class="lg" type="password" placeholder="Password" />
       </fieldset>
diff --git a/docs/pages/utilities/display.md b/docs/pages/utilities/display.md
index 8f38fc8..ea52c23 100644
--- a/docs/pages/utilities/display.md
+++ b/docs/pages/utilities/display.md
@@ -1,7 +1,7 @@
 ---
 title: 'Utilities: Display - Sloth.css'
 description: Controlling the display type of elements
-tags: flex flex-col grid column grid-cols-1 grid-cols-2 grid-cols-3 flex-wrap inline block inline-block visibility invisible hidden
+tags: flex flex-col grid column grid-cols-1 grid-cols-2 grid-cols-3 flex-wrap inline block inline-block visibility invisible hidden grow shrink
 ---
 
 ## Display
@@ -61,7 +61,7 @@ Elements can also be position underneath each other (column direction) instead o
   Note that <code>flex-col</code> is a display utility and already includes the <code>display: flex;</code> rule. So there's no need to use two classes like in Tailwind <del><code>flex flex-column</code></del>. Just use <ins><code>flex-col</code></ins>.
 </p>
 
-User the `flex-wrap` class, if you want your flex items to break onto a new line when the container limit is reached.
+Use the `flex-wrap` class, if you want your flex items to break onto a new line when the container limit is reached.
 
 <div class="demo">
   <div class="flex flex-wrap max-w-screen-xs gap-4 items-center bg-muted p-4 rounded">
@@ -87,6 +87,15 @@ User the `flex-wrap` class, if you want your flex items to break onto a new line
 .flex-wrap { flex-wrap: wrap; }
 ```
 
+If you need single items to grow or shrink, use the `grow` and `shrink` classes. If you want to prevent them from growing or shrinking, use `grow-0` or `shrink-0` respectively.
+
+```css
+.grow     { flex-grow: 1;   }
+.shrink   { flex-shrink: 1; }
+.grow-0   { flex-grow: 0;   }
+.shrink-0 { flex-shrink: 0; }
+```
+
 ### Grid
 
 Grid based layouts can be used if a more table-based layout is needed. Use the `grid` class in combination with the `grid-cols-{n}` classes to define a basic grid.
diff --git a/docs/pages/utilities/positioning.md b/docs/pages/utilities/positioning.md
index eb55fda..0418032 100644
--- a/docs/pages/utilities/positioning.md
+++ b/docs/pages/utilities/positioning.md
@@ -1,7 +1,7 @@
 ---
 title: 'Utilities: Positioning - Sloth.css'
 description: Controlling position, alignment and overflow of elements
-tags: relative absolute fixed sticky items-center items-start items-end items-stretch flex-center scroll overflow-hidden overflow-visible overflow-auto overflow-x-auto overflow-y-auto
+tags: relative absolute fixed sticky items-center items-start items-end items-stretch flex-center scroll overflow-hidden overflow-visible overflow-auto overflow-x-auto overflow-y-auto justify-start justify-center justify-end justify-between justify-around justify-evenly
 ---
 
 ## Positioning
@@ -119,6 +119,14 @@ Flex and grid items can be aligned on the [cross axis](https://developer.mozilla
 Flex and grid items can be aligned on the [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) / inline axis using `justify-*` classes.
 
 <div class="demo flex flex-wrap gap-4">
+  <div class="flex-col gap-4 w-64 bg-muted p-4 rounded">
+    <div class="flex gap-1 justify-start">
+      <div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#1</div>
+      <div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#2</div>
+      <div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#3</div>
+    </div>
+    <div class="flex-center"><code>.justify-start</code></div>
+  </div>
   <div class="flex-col gap-4 w-64 bg-muted p-4 rounded">
     <div class="flex gap-1 justify-center">
       <div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#1</div>
@@ -127,6 +135,14 @@ Flex and grid items can be aligned on the [main axis](https://developer.mozilla.
     </div>
     <div class="flex-center"><code>.justify-center</code></div>
   </div>
+  <div class="flex-col gap-4 w-64 bg-muted p-4 rounded">
+    <div class="flex gap-1 justify-end">
+      <div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#1</div>
+      <div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#2</div>
+      <div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#3</div>
+    </div>
+    <div class="flex-center"><code>.justify-end</code></div>
+  </div>
   <div class="flex-col gap-4 w-64 bg-muted p-4 rounded">
     <div class="flex gap-1 justify-between">
       <div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#1</div>
@@ -143,13 +159,23 @@ Flex and grid items can be aligned on the [main axis](https://developer.mozilla.
     </div>
     <div class="flex-center"><code>.justify-around</code></div>
   </div>
+  <div class="flex-col gap-4 w-64 bg-muted p-4 rounded">
+    <div class="flex gap-1 justify-evenly">
+      <div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#1</div>
+      <div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#2</div>
+      <div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#3</div>
+    </div>
+    <div class="flex-center"><code>.justify-evenly</code></div>
+  </div>
 </div>
 
 ```html
-<div class="flex items-start ...">...</div>
-<div class="flex items-center ...">...</div>
-<div class="flex items-end ...">...</div>
-<div class="flex items-stretch ...">...</div>
+<div class="flex justify-start ...">...</div>
+<div class="flex justify-center ...">...</div>
+<div class="flex justify-end ...">...</div>
+<div class="flex justify-between ...">...</div>
+<div class="flex justify-around ...">...</div>
+<div class="flex justify-evenly ...">...</div>
 ```
 
 For centering content horizontally and vertically, the special utility class `flex-center` is provided.
diff --git a/docs/pages/utilities/text.md b/docs/pages/utilities/text.md
index 601473e..7944424 100644
--- a/docs/pages/utilities/text.md
+++ b/docs/pages/utilities/text.md
@@ -142,6 +142,7 @@ Font stacks can be overwritten by the corresponding custom property:
   <p class="text-base">The Sloth is a lazy mammal. <code class="text-sm">.text-base</code></p>
   <p class="text-lg">The Sloth is a lazy mammal. <code class="text-sm">.text-lg</code></p>
   <p class="text-xl">The Sloth is a lazy mammal. <code class="text-sm">.text-xl</code></p>
+  <p class="text-2xl">The Sloth is a lazy mammal. <code class="text-sm">.text-2xl</code></p>
 </div>
 
 ```html
@@ -150,14 +151,16 @@ Font stacks can be overwritten by the corresponding custom property:
 <p class="text-base">...</p>
 <p class="text-lg">...</p>
 <p class="text-xl">...</p>
+<p class="text-2xl">...</p>
 ```
 
 ```css
-.text-xs   { font-size: 0.75rem;  line-height: 1rem;    }
-.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
-.text-base { font-size: 1rem;     line-height: 1.5rem;  }
-.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
-.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
+.text-xs   { font-size: 0.75rem;  line-height: 1rem;     }
+.text-sm   { font-size: 0.875rem; line-height: 1.25rem;  }
+.text-base { font-size: 1rem;     line-height: 1.5rem;   }
+.text-lg   { font-size: 1.25rem;  line-height: 1.75rem;  }
+.text-xl   { font-size: 1.5rem;   line-height: 1.875rem; }
+.text-2xl  { font-size: 2rem;     line-height: 2.25rem;  }
 ```
 
 The basic font size that defines all `rem` based properties (which are almost all size based properties) can be overwritten by the corresponding custom property. Only adjust this if necessary for your use case (it might make everything too big or too small).
diff --git a/src/_config.css b/src/_config.css
index ca0ae71..694d6cd 100644
--- a/src/_config.css
+++ b/src/_config.css
@@ -53,7 +53,7 @@
 
   /* Shadows */
   --shadow-border: 0 0 0 1px inset;
-  --shadow-inset:  0 2px .25rem 0 inset;
+  --shadow-inset:  0 3px .25rem 0 inset;
   --shadow-float:  0 .25rem .75rem -.4rem;
 
   /* Borders */
diff --git a/src/_utilities.css b/src/_utilities.css
index 807ca05..a7f9cf9 100644
--- a/src/_utilities.css
+++ b/src/_utilities.css
@@ -135,6 +135,18 @@
 .flex-wrap {
   flex-wrap: wrap;
 }
+.grow {
+  flex-grow: 1;
+}
+.shrink {
+  flex-shrink: 1;
+}
+.grow-0 {
+  flex-grow: 0;
+}
+.shrink-0 {
+  flex-shrink: 0;
+}
 .invisible {
   visibility: hidden;
 }
@@ -191,15 +203,24 @@
 .items-stretch {
   align-items: stretch;
 }
+.justify-start {
+  justify-content: start;
+}
 .justify-center {
   justify-content: center;
 }
+.justify-end {
+  justify-content: end;
+}
 .justify-between {
   justify-content: space-between;
 }
 .justify-around {
   justify-content: space-around;
 }
+.justify-evenly {
+  justify-content: space-evenly;
+}
 .flex-center {
   display: flex;
   align-items: center;
@@ -374,12 +395,16 @@
   line-height: 1.5rem;
 }
 .text-lg {
-  font-size: 1.125rem;
+  font-size: 1.25rem;
   line-height: 1.75rem;
 }
 .text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
+  font-size: 1.5rem;
+  line-height: 1.875rem;
+}
+.text-2xl {
+  font-size: 2rem;
+  line-height: 2.25rem;
 }
 .truncate {
   overflow: hidden;
diff --git a/src/core/_form.css b/src/core/_form.css
index 85ad073..9e4d677 100644
--- a/src/core/_form.css
+++ b/src/core/_form.css
@@ -26,14 +26,18 @@ label {
 /* <input>, <textarea>, <select> */
 input, textarea, select {
   background-color: var(--color-bg-base);
-  box-shadow: var(--color-shadow) var(--shadow-inset);
+  box-shadow:
+    var(--color-border) var(--shadow-border),
+    var(--color-shadow) var(--shadow-inset);
   font-family: inherit;
   transition: var(--transition-outline), var(--transition-color);
   border: 0;
   box-sizing: border-box;
 
   &:hover:not(:disabled) {
-    box-shadow: var(--color-accent) var(--shadow-border);
+    box-shadow:
+      var(--color-accent) var(--shadow-border),
+      var(--color-shadow) var(--shadow-inset);
   }
   &:focus:not(:disabled), &:focus-within:not(:disabled) {
     outline: 4px solid var(--color-outline);