storefront-layouts 1.0.3 → 1.0.4

package/dist/styles/index.css

@@ -164,6 +164,7 @@
     --leading-relaxed: 1.625;
     --radius-2xl: 1rem;
     --radius-3xl: 1.5rem;
+    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
     --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
     --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
     --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
@@ -623,6 +624,9 @@
   .bottom-40 {
     bottom: calc(var(--spacing) * 40);
   }
+  .bottom-\[-2px\] {
+    bottom: -2px;
+  }
   .bottom-\[-10\%\] {
     bottom: -10%;
   }
@@ -857,9 +861,6 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
-  .mt-3 {
-    margin-top: calc(var(--spacing) * 3);
-  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
@@ -1193,6 +1194,9 @@
   .h-64 {
     height: calc(var(--spacing) * 64);
   }
+  .h-80 {
+    height: calc(var(--spacing) * 80);
+  }
   .h-96 {
     height: calc(var(--spacing) * 96);
   }
@@ -1220,9 +1224,6 @@
   .h-\[60vh\] {
     height: 60vh;
   }
-  .h-\[70dvh\] {
-    height: 70dvh;
-  }
   .h-\[85vh\] {
     height: 85vh;
   }
@@ -1262,9 +1263,6 @@
   .h-\[800px\] {
     height: 800px;
   }
-  .h-\[min\(70dvh\,28rem\)\] {
-    height: min(70dvh, 28rem);
-  }
   .h-auto {
     height: auto;
   }
@@ -1289,9 +1287,6 @@
   .max-h-48 {
     max-height: calc(var(--spacing) * 48);
   }
-  .max-h-52 {
-    max-height: calc(var(--spacing) * 52);
-  }
   .max-h-64 {
     max-height: calc(var(--spacing) * 64);
   }
@@ -1352,9 +1347,6 @@
   .min-h-\[100dvh\] {
     min-height: 100dvh;
   }
-  .min-h-\[100px\] {
-    min-height: 100px;
-  }
   .min-h-\[140px\] {
     min-height: 140px;
   }
@@ -1631,6 +1623,9 @@
   .max-w-\[320px\] {
     max-width: 320px;
   }
+  .max-w-\[420px\] {
+    max-width: 420px;
+  }
   .max-w-\[1600px\] {
     max-width: 1600px;
   }
@@ -1978,6 +1973,9 @@
   .break-inside-avoid {
     break-inside: avoid;
   }
+  .auto-rows-\[300px\] {
+    grid-auto-rows: 300px;
+  }
   .auto-rows-min {
     grid-auto-rows: min-content;
   }
@@ -3504,6 +3502,9 @@
   .bg-\[radial-gradient\(circle_at_20\%_20\%\,rgba\(68\,0\,102\,0\.05\)\,transparent_40\%\)\,radial-gradient\(circle_at_80\%_70\%\,rgba\(209\,98\,83\,0\.08\)\,transparent_45\%\)\] {
     background-image: radial-gradient(circle at 20% 20%,rgba(68,0,102,0.05),transparent 40%),radial-gradient(circle at 80% 70%,rgba(209,98,83,0.08),transparent 45%);
   }
+  .bg-\[url\(\'https\:\/\/grainy-gradients\.vercel\.app\/noise\.svg\'\)\] {
+    background-image: url('https://grainy-gradients.vercel.app/noise.svg');
+  }
   .bg-\[url\(\'https\:\/\/www\.transparenttextures\.com\/patterns\/noise\.png\'\)\] {
     background-image: url('https://www.transparenttextures.com/patterns/noise.png');
   }
@@ -3637,6 +3638,13 @@
     }
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .from-slate-950\/80 {
+    --tw-gradient-from: color-mix(in srgb, oklch(12.9% 0.042 264.695) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-from: color-mix(in oklab, var(--color-slate-950) 80%, transparent);
+    }
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .from-slate-950\/90 {
     --tw-gradient-from: color-mix(in srgb, oklch(12.9% 0.042 264.695) 90%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3741,6 +3749,19 @@
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
+  .via-gray-800 {
+    --tw-gradient-via: var(--color-gray-800);
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+  .via-gray-900\/80 {
+    --tw-gradient-via: color-mix(in srgb, oklch(21% 0.034 264.665) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-via: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
+    }
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
   .via-indigo-400 {
     --tw-gradient-via: var(--color-indigo-400);
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
@@ -3785,6 +3806,14 @@
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
+  .via-slate-950\/20 {
+    --tw-gradient-via: color-mix(in srgb, oklch(12.9% 0.042 264.695) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-via: color-mix(in oklab, var(--color-slate-950) 20%, transparent);
+    }
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
   .via-slate-950\/30 {
     --tw-gradient-via: color-mix(in srgb, oklch(12.9% 0.042 264.695) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3892,10 +3921,6 @@
     --tw-gradient-to: var(--color-orange-500);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .to-orange-600 {
-    --tw-gradient-to: var(--color-orange-600);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .to-pink-400 {
     --tw-gradient-to: var(--color-pink-400);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -3942,6 +3967,14 @@
     --tw-gradient-to: var(--color-white);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .to-yellow-400 {
+    --tw-gradient-to: var(--color-yellow-400);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .to-yellow-500 {
+    --tw-gradient-to: var(--color-yellow-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .\[mask-image\:radial-gradient\(ellipse_60\%_60\%_at_50\%_50\%\,\#000_70\%\,transparent_100\%\)\] {
     mask-image: radial-gradient(ellipse 60% 60% at 50% 50%,#000 70%,transparent 100%);
   }
@@ -4335,6 +4368,10 @@
     font-size: var(--text-7xl);
     line-height: var(--tw-leading, var(--text-7xl--line-height));
   }
+  .text-8xl {
+    font-size: var(--text-8xl);
+    line-height: var(--tw-leading, var(--text-8xl--line-height));
+  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -4565,12 +4602,6 @@
   .text-\[\#5b6470\] {
     color: #5b6470;
   }
-  .text-\[\#5c4d68\] {
-    color: #5c4d68;
-  }
-  .text-\[\#7b6d88\] {
-    color: #7b6d88;
-  }
   .text-\[\#7b8492\] {
     color: #7b8492;
   }
@@ -4667,6 +4698,9 @@
   .text-black {
     color: var(--color-black);
   }
+  .text-blue-100 {
+    color: var(--color-blue-100);
+  }
   .text-blue-400 {
     color: var(--color-blue-400);
   }
@@ -4981,21 +5015,6 @@
   .accent-\[\#3858e9\] {
     accent-color: #3858e9;
   }
-  .accent-black {
-    accent-color: var(--color-black);
-  }
-  .accent-blue-600 {
-    accent-color: var(--color-blue-600);
-  }
-  .accent-gray-900 {
-    accent-color: var(--color-gray-900);
-  }
-  .accent-orange-500 {
-    accent-color: var(--color-orange-500);
-  }
-  .accent-orange-600 {
-    accent-color: var(--color-orange-600);
-  }
   .\[color-scheme\:dark\] {
     color-scheme: dark;
   }
@@ -5139,6 +5158,10 @@
     --tw-shadow: 0 10px 30px var(--tw-shadow-color, rgba(249,115,22,0.4));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_10px_40px_rgba\(0\,0\,0\,0\.08\)\] {
+    --tw-shadow: 0 10px 40px var(--tw-shadow-color, rgba(0,0,0,0.08));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_12px_24px_rgba\(15\,23\,42\,0\.08\)\] {
     --tw-shadow: 0 12px 24px var(--tw-shadow-color, rgba(15,23,42,0.08));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -5295,12 +5318,24 @@
       --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-green-900) 10%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
+  .shadow-orange-500\/30 {
+    --tw-shadow-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-orange-500) 30%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
   .shadow-orange-500\/50 {
     --tw-shadow-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-orange-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
+  .shadow-orange-600\/30 {
+    --tw-shadow-color: color-mix(in srgb, oklch(64.6% 0.222 41.116) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-orange-600) 30%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
   .shadow-purple-200 {
     --tw-shadow-color: oklch(90.2% 0.063 306.703);
     @supports (color: color-mix(in lab, red, red)) {
@@ -5458,6 +5493,11 @@
     --tw-drop-shadow: drop-shadow(var(--drop-shadow-md));
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .drop-shadow-sm {
+    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
+    --tw-drop-shadow: drop-shadow(var(--drop-shadow-sm));
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .grayscale {
     --tw-grayscale: grayscale(100%);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -5871,6 +5911,16 @@
       }
     }
   }
+  .group-hover\:bg-black\/0 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #000 0%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-black) 0%, transparent);
+        }
+      }
+    }
+  }
   .group-hover\:bg-black\/5 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -6024,6 +6074,13 @@
       }
     }
   }
+  .group-hover\:text-primary {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--primary);
+      }
+    }
+  }
   .group-hover\:text-rose-600 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -6073,6 +6130,14 @@
       }
     }
   }
+  .group-hover\:shadow-\[0_20px_40px_rgba\(249\,115\,22\,0\.2\)\] {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        --tw-shadow: 0 20px 40px var(--tw-shadow-color, rgba(249,115,22,0.2));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
   .group-hover\:shadow-\[0_20px_50px_rgba\(249\,115\,22\,0\.15\)\] {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -6226,13 +6291,6 @@
       }
     }
   }
-  .group-hover\/title\:underline {
-    &:is(:where(.group\/title):hover *) {
-      @media (hover: hover) {
-        text-decoration-line: underline;
-      }
-    }
-  }
   .selection\:bg-\[\#f7f5f0\] {
     & *::selection {
       background-color: #f7f5f0;
@@ -6309,6 +6367,11 @@
       color: color-mix(in oklab, #1b0029 35%, transparent);
     }
   }
+  .placeholder\:text-blue-200 {
+    &::placeholder {
+      color: var(--color-blue-200);
+    }
+  }
   .placeholder\:text-gray-400 {
     &::placeholder {
       color: var(--color-gray-400);
@@ -6706,6 +6769,13 @@
       }
     }
   }
+  .hover\:border-slate-300 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-slate-300);
+      }
+    }
+  }
   .hover\:border-slate-900 {
     &:hover {
       @media (hover: hover) {
@@ -7566,6 +7636,16 @@
       }
     }
   }
+  .hover\:shadow-primary\/20 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow-color: var(--primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--primary) 20%, transparent) var(--tw-shadow-alpha), transparent);
+        }
+      }
+    }
+  }
   .hover\:shadow-rose-900\/5 {
     &:hover {
       @media (hover: hover) {
@@ -7632,6 +7712,11 @@
       border-color: var(--color-gray-400);
     }
   }
+  .focus\:border-gray-500 {
+    &:focus {
+      border-color: var(--color-gray-500);
+    }
+  }
   .focus\:border-gray-900 {
     &:focus {
       border-color: var(--color-gray-900);
@@ -7683,11 +7768,24 @@
       border-color: transparent;
     }
   }
+  .focus\:border-white {
+    &:focus {
+      border-color: var(--color-white);
+    }
+  }
   .focus\:bg-white {
     &:focus {
       background-color: var(--color-white);
     }
   }
+  .focus\:bg-white\/20 {
+    &:focus {
+      background-color: color-mix(in srgb, #fff 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+      }
+    }
+  }
   .focus\:shadow-\[0_0_0_3px_rgba\(59\,130\,246\,0\.1\)\] {
     &:focus {
       --tw-shadow: 0 0 0 3px var(--tw-shadow-color, rgba(59,130,246,0.1));
@@ -7881,6 +7979,11 @@
       }
     }
   }
+  .focus\:ring-yellow-500 {
+    &:focus {
+      --tw-ring-color: var(--color-yellow-500);
+    }
+  }
   .focus\:ring-offset-0 {
     &:focus {
       --tw-ring-offset-width: 0px;
@@ -8115,11 +8218,6 @@
       left: calc(var(--spacing) * 0);
     }
   }
-  .max-sm\:min-h-\[100dvh\] {
-    @media (width < 40rem) {
-      min-height: 100dvh;
-    }
-  }
   .max-sm\:w-screen {
     @media (width < 40rem) {
       width: 100vw;
@@ -8130,21 +8228,14 @@
       max-width: 100dvw;
     }
   }
-  .max-sm\:rounded-none {
+  .max-sm\:max-w-\[min\(100vw\,420px\)\] {
     @media (width < 40rem) {
-      border-radius: 0;
+      max-width: min(100vw, 420px);
     }
   }
-  .max-sm\:border-l-0 {
-    @media (width < 40rem) {
-      border-left-style: var(--tw-border-style);
-      border-left-width: 0px;
-    }
-  }
-  .max-sm\:shadow-none {
+  .max-sm\:rounded-none {
     @media (width < 40rem) {
-      --tw-shadow: 0 0 #0000;
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      border-radius: 0;
     }
   }
   .min-\[900px\]\:flex {
@@ -8202,11 +8293,6 @@
       margin-top: calc(var(--spacing) * 7);
     }
   }
-  .sm\:mr-2 {
-    @media (width >= 40rem) {
-      margin-right: calc(var(--spacing) * 2);
-    }
-  }
   .sm\:mb-5 {
     @media (width >= 40rem) {
       margin-bottom: calc(var(--spacing) * 5);
@@ -8232,9 +8318,9 @@
       display: inline;
     }
   }
-  .sm\:h-5 {
+  .sm\:h-4 {
     @media (width >= 40rem) {
-      height: calc(var(--spacing) * 5);
+      height: calc(var(--spacing) * 4);
     }
   }
   .sm\:h-8 {
@@ -8257,11 +8343,6 @@
       height: calc(var(--spacing) * 11);
     }
   }
-  .sm\:h-12 {
-    @media (width >= 40rem) {
-      height: calc(var(--spacing) * 12);
-    }
-  }
   .sm\:h-14 {
     @media (width >= 40rem) {
       height: calc(var(--spacing) * 14);
@@ -8277,24 +8358,14 @@
       height: calc(var(--spacing) * 32);
     }
   }
-  .sm\:h-\[75dvh\] {
-    @media (width >= 40rem) {
-      height: 75dvh;
-    }
-  }
   .sm\:h-\[480px\] {
     @media (width >= 40rem) {
       height: 480px;
     }
   }
-  .sm\:h-\[min\(75dvh\,32rem\)\] {
+  .sm\:w-4 {
     @media (width >= 40rem) {
-      height: min(75dvh, 32rem);
-    }
-  }
-  .sm\:w-5 {
-    @media (width >= 40rem) {
-      width: calc(var(--spacing) * 5);
+      width: calc(var(--spacing) * 4);
     }
   }
   .sm\:w-8 {
@@ -8332,6 +8403,11 @@
       width: calc(var(--spacing) * 32);
     }
   }
+  .sm\:w-48 {
+    @media (width >= 40rem) {
+      width: calc(var(--spacing) * 48);
+    }
+  }
   .sm\:w-\[480px\] {
     @media (width >= 40rem) {
       width: 480px;
@@ -8362,16 +8438,6 @@
       max-width: none;
     }
   }
-  .sm\:min-w-\[180px\] {
-    @media (width >= 40rem) {
-      min-width: 180px;
-    }
-  }
-  .sm\:flex-1 {
-    @media (width >= 40rem) {
-      flex: 1;
-    }
-  }
   .sm\:flex-none {
     @media (width >= 40rem) {
       flex: none;
@@ -8437,15 +8503,6 @@
       gap: calc(var(--spacing) * 8);
     }
   }
-  .sm\:space-y-2\.5 {
-    @media (width >= 40rem) {
-      :where(& > :not(:last-child)) {
-        --tw-space-y-reverse: 0;
-        margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
-        margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
-      }
-    }
-  }
   .sm\:space-y-4 {
     @media (width >= 40rem) {
       :where(& > :not(:last-child)) {
@@ -8480,14 +8537,14 @@
       padding: calc(var(--spacing) * 8);
     }
   }
-  .sm\:px-6 {
+  .sm\:px-5 {
     @media (width >= 40rem) {
-      padding-inline: calc(var(--spacing) * 6);
+      padding-inline: calc(var(--spacing) * 5);
     }
   }
-  .sm\:px-7 {
+  .sm\:px-6 {
     @media (width >= 40rem) {
-      padding-inline: calc(var(--spacing) * 7);
+      padding-inline: calc(var(--spacing) * 6);
     }
   }
   .sm\:py-1 {
@@ -8571,12 +8628,6 @@
       line-height: var(--tw-leading, var(--text-base--line-height));
     }
   }
-  .sm\:text-lg {
-    @media (width >= 40rem) {
-      font-size: var(--text-lg);
-      line-height: var(--tw-leading, var(--text-lg--line-height));
-    }
-  }
   .sm\:text-sm {
     @media (width >= 40rem) {
       font-size: var(--text-sm);
@@ -8612,11 +8663,6 @@
       filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
     }
   }
-  .md\:absolute {
-    @media (width >= 48rem) {
-      position: absolute;
-    }
-  }
   .md\:sticky {
     @media (width >= 48rem) {
       position: sticky;
@@ -8632,29 +8678,19 @@
       right: calc(var(--spacing) * 8);
     }
   }
-  .md\:right-\[-2rem\] {
-    @media (width >= 48rem) {
-      right: -2rem;
-    }
-  }
-  .md\:bottom-\[-2rem\] {
-    @media (width >= 48rem) {
-      bottom: -2rem;
-    }
-  }
   .md\:left-8 {
     @media (width >= 48rem) {
       left: calc(var(--spacing) * 8);
     }
   }
-  .md\:col-span-2 {
+  .md\:col-span-1 {
     @media (width >= 48rem) {
-      grid-column: span 2 / span 2;
+      grid-column: span 1 / span 1;
     }
   }
-  .md\:mx-0 {
+  .md\:col-span-2 {
     @media (width >= 48rem) {
-      margin-inline: calc(var(--spacing) * 0);
+      grid-column: span 2 / span 2;
     }
   }
   .md\:-mt-32 {
@@ -8662,11 +8698,6 @@
       margin-top: calc(var(--spacing) * -32);
     }
   }
-  .md\:mt-0 {
-    @media (width >= 48rem) {
-      margin-top: calc(var(--spacing) * 0);
-    }
-  }
   .md\:mb-6 {
     @media (width >= 48rem) {
       margin-bottom: calc(var(--spacing) * 6);
@@ -8747,9 +8778,9 @@
       height: calc(var(--spacing) * 28);
     }
   }
-  .md\:h-48 {
+  .md\:h-32 {
     @media (width >= 48rem) {
-      height: calc(var(--spacing) * 48);
+      height: calc(var(--spacing) * 32);
     }
   }
   .md\:h-auto {
@@ -8812,6 +8843,11 @@
       width: calc(var(--spacing) * 28);
     }
   }
+  .md\:w-32 {
+    @media (width >= 48rem) {
+      width: calc(var(--spacing) * 32);
+    }
+  }
   .md\:w-48 {
     @media (width >= 48rem) {
       width: calc(var(--spacing) * 48);
@@ -8832,9 +8868,9 @@
       width: auto;
     }
   }
-  .md\:max-w-md {
+  .md\:max-w-\[420px\] {
     @media (width >= 48rem) {
-      max-width: var(--container-md);
+      max-width: 420px;
     }
   }
   .md\:max-w-xs {
@@ -9010,6 +9046,11 @@
       padding: calc(var(--spacing) * 14);
     }
   }
+  .md\:p-24 {
+    @media (width >= 48rem) {
+      padding: calc(var(--spacing) * 24);
+    }
+  }
   .md\:px-3\.5 {
     @media (width >= 48rem) {
       padding-inline: calc(var(--spacing) * 3.5);
@@ -9246,11 +9287,6 @@
       height: calc(var(--spacing) * 16);
     }
   }
-  .lg\:h-\[85vh\] {
-    @media (width >= 64rem) {
-      height: 85vh;
-    }
-  }
   .lg\:h-full {
     @media (width >= 64rem) {
       height: 100%;
@@ -9401,6 +9437,11 @@
       padding: calc(var(--spacing) * 14);
     }
   }
+  .lg\:p-20 {
+    @media (width >= 64rem) {
+      padding: calc(var(--spacing) * 20);
+    }
+  }
   .lg\:px-8 {
     @media (width >= 64rem) {
       padding-inline: calc(var(--spacing) * 8);