npm - @westpac/ui - Versions diffs - 0.7.0 → 0.8.0 - Mend

@westpac/ui 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (687) hide show

package/dist/css/westpac-ui.css CHANGED Viewed

@@ -1499,6 +1499,10 @@ video {
   --colors-pictogram-dark: 0, 0, 0;
   --colors-pictogram-duo-highlight: 145, 151, 154;
   --colors-pictogram-duo-outline: 0, 0, 0;
+}body {
+  font-size: 0.875rem;
+  line-height: 1.428571429;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }*, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -1692,6 +1696,14 @@ video {
   font-size: 0.875rem;
   line-height: 1.4;
   font-family: var(--fontFamily-brand-0), var(--fontFamily-brand-1), var(--fontFamily-brand-2), var(--fontFamily-brand-3), var(--fontFamily-brand-4), var(--fontFamily-brand-5), var(--fontFamily-brand-6), var(--fontFamily-brand-7), var(--fontFamily-brand-8), var(--fontFamily-brand-9);
+}.typography-body-11 {
+  font-size: 0.875rem;
+  line-height: 1.428571429;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+}.typography-brand-11 {
+  font-size: 0.875rem;
+  line-height: 1.428571429;
+  font-family: var(--fontFamily-brand-0), var(--fontFamily-brand-1), var(--fontFamily-brand-2), var(--fontFamily-brand-3), var(--fontFamily-brand-4), var(--fontFamily-brand-5), var(--fontFamily-brand-6), var(--fontFamily-brand-7), var(--fontFamily-brand-8), var(--fontFamily-brand-9);
 }.form-control::-webkit-outer-spin-button,.form-control::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
@@ -2122,9 +2134,6 @@ video {
 }.my-4 {
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
-}.my-\[16px\] {
-  margin-top: 16px;
-  margin-bottom: 16px;
 }.-mt-1 {
   margin-top: -0.375rem;
 }.-mt-2 {
@@ -2149,12 +2158,10 @@ video {
   margin-bottom: 1.125rem;
 }.ml-1 {
   margin-left: 0.375rem;
+}.ml-\[-1px\] {
+  margin-left: -1px;
 }.ml-\[0\.4em\] {
   margin-left: 0.4em;
-}.ml-auto {
-  margin-left: auto;
-}.mr-0 {
-  margin-right: 0;
 }.mr-1 {
   margin-right: 0.375rem;
 }.mr-2 {
@@ -2167,8 +2174,8 @@ video {
   margin-right: 0.25rem;
 }.mr-\[0\.4em\] {
   margin-right: 0.4em;
-}.mr-\[0\.5rem\] {
-  margin-right: 0.5rem;
+}.mr-\[0\.5em\] {
+  margin-right: 0.5em;
 }.mt-0 {
   margin-top: 0;
 }.mt-1 {
@@ -2177,18 +2184,16 @@ video {
   margin-top: 0.75rem;
 }.mt-4 {
   margin-top: 1.5rem;
+}.mt-6 {
+  margin-top: 2.25rem;
 }.mt-\[-1px\] {
   margin-top: -1px;
-}.mt-\[0\.125rem\] {
-  margin-top: 0.125rem;
 }.mt-\[0\.1875rem\] {
   margin-top: 0.1875rem;
 }.mt-\[0\.875rem\] {
   margin-top: 0.875rem;
 }.mt-\[0\.9375rem\] {
   margin-top: 0.9375rem;
-}.mt-\[mr-0\.25rem\] {
-  margin-top: mr-0.25rem;
 }.box-border {
   box-sizing: border-box;
 }.box-content {
@@ -2362,6 +2367,8 @@ video {
   width: 122px;
 }.w-\[14px\] {
   width: 14px;
+}.w-\[15\.625rem\] {
+  width: 15.625rem;
 }.w-\[150px\] {
   width: 150px;
 }.w-\[160px\] {
@@ -2603,8 +2610,6 @@ video {
   border-radius: 2.5rem;
 }.rounded-\[2\.875rem\] {
   border-radius: 2.875rem;
-}.rounded-\[3px\] {
-  border-radius: 3px;
 }.rounded-full {
   border-radius: 9999px;
 }.rounded-none {
@@ -3447,8 +3452,6 @@ video {
   padding: 0.0625rem;
 }.p-\[0\.4375rem\] {
   padding: 0.4375rem;
-}.p-\[0\.8125rem_1\.125rem\] {
-  padding: 0.8125rem 1.125rem;
 }.p-\[0_1\.125rem_1\.875rem\] {
   padding: 0 1.125rem 1.875rem;
 }.p-\[0_1\.125rem_2\.625rem\] {
@@ -3510,6 +3513,9 @@ video {
 }.py-\[0\.625rem\] {
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
+}.py-\[0\.9375rem\] {
+  padding-top: 0.9375rem;
+  padding-bottom: 0.9375rem;
 }.py-\[2px\] {
   padding-top: 2px;
   padding-bottom: 2px;
@@ -3543,18 +3549,66 @@ video {
   padding-left: 1.125rem;
 }.pl-\[1\.1875rem\] {
   padding-left: 1.1875rem;
-}.pl-\[2\.25rem\] {
-  padding-left: 2.25rem;
 }.pr-1 {
   padding-right: 0.375rem;
+}.pr-10 {
+  padding-right: 3.75rem;
+}.pr-11 {
+  padding-right: 4.125rem;
+}.pr-12 {
+  padding-right: 4.5rem;
+}.pr-13 {
+  padding-right: 4.875rem;
+}.pr-14 {
+  padding-right: 5.25rem;
+}.pr-15 {
+  padding-right: 5.625rem;
+}.pr-16 {
+  padding-right: 6rem;
+}.pr-17 {
+  padding-right: 6.375rem;
+}.pr-18 {
+  padding-right: 6.75rem;
+}.pr-19 {
+  padding-right: 7.125rem;
 }.pr-2 {
   padding-right: 0.75rem;
+}.pr-20 {
+  padding-right: 7.5rem;
+}.pr-21 {
+  padding-right: 7.875rem;
+}.pr-22 {
+  padding-right: 8.25rem;
+}.pr-23 {
+  padding-right: 8.625rem;
+}.pr-24 {
+  padding-right: 9rem;
+}.pr-25 {
+  padding-right: 9.375rem;
+}.pr-26 {
+  padding-right: 9.75rem;
+}.pr-27 {
+  padding-right: 10.125rem;
+}.pr-28 {
+  padding-right: 10.5rem;
+}.pr-29 {
+  padding-right: 10.875rem;
 }.pr-3 {
   padding-right: 1.125rem;
+}.pr-30 {
+  padding-right: 11.25rem;
+}.pr-4 {
+  padding-right: 1.5rem;
 }.pr-5 {
   padding-right: 1.875rem;
 }.pr-6 {
   padding-right: 2.25rem;
+}.pr-7 {
+  padding-right: 2.625rem;
+}.pr-8 {
+  padding-right: 3rem;
+}.pr-9 {
+  padding-right: 3.375rem;
 }.pr-\[0\.5625rem\] {
   padding-right: 0.5625rem;
 }.pr-\[0\.9375rem\] {
@@ -3575,8 +3629,6 @@ video {
   padding-top: 0.1875rem;
 }.pt-\[0\.5625rem\] {
   padding-top: 0.5625rem;
-}.pt-\[0\.5rem\] {
-  padding-top: 0.5rem;
 }.pt-\[0\.625rem\] {
   padding-top: 0.625rem;
 }.pt-\[0\.875rem\] {
@@ -3631,8 +3683,12 @@ video {
   line-height: 1.5;
 }.leading-\[1\.685rem\] {
   line-height: 1.685rem;
+}.leading-loose {
+  line-height: 1.428571429;
 }.leading-none {
   line-height: 1;
+}.leading-normal {
+  line-height: 1.4;
 }.leading-tight {
   line-height: 1.2;
 }.\!text-text {
@@ -3823,10 +3879,6 @@ video {
   outline-color: rgb(var(--colors-focus));
 }.select-caret {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' style='color: rgb(89,87,103);'><path fill='currentColor' d='M0 0l7 8 7-8z'/></svg>");
-}body {
-  font-size: 0.875rem;
-  line-height: 1.4;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }.read-only\:form-control-disabled:-moz-read-only {
   cursor: not-allowed;
   border-style: dashed;
@@ -4339,15 +4391,9 @@ video {
   content: var(--tw-content);
   top: 0;
   bottom: 0;
-}.before\:left-1\/2::before {
-  content: var(--tw-content);
-  left: 50%;
 }.before\:left-\[6px\]::before {
   content: var(--tw-content);
   left: 6px;
-}.before\:top-1\/2::before {
-  content: var(--tw-content);
-  top: 50%;
 }.before\:block::before {
   content: var(--tw-content);
   display: block;
@@ -4357,19 +4403,9 @@ video {
 }.before\:h-2::before {
   content: var(--tw-content);
   height: 0.75rem;
-}.before\:h-\[2px\]::before {
-  content: var(--tw-content);
-  height: 2px;
 }.before\:w-2::before {
   content: var(--tw-content);
   width: 0.75rem;
-}.before\:w-full::before {
-  content: var(--tw-content);
-  width: 100%;
-}.before\:-translate-x-1\/2::before {
-  content: var(--tw-content);
-  --tw-translate-x: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }.before\:-translate-y-1\/2::before {
   content: var(--tw-content);
   --tw-translate-y: -50%;
@@ -4402,10 +4438,6 @@ video {
   content: var(--tw-content);
   --tw-bg-opacity: 1;
   background-color: rgba(var(--colors-hero), var(--tw-bg-opacity));
-}.before\:bg-muted::before {
-  content: var(--tw-content);
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
 }.before\:transition-colors::before {
   content: var(--tw-content);
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
@@ -4424,9 +4456,6 @@ video {
 }.after\:left-0::after {
   content: var(--tw-content);
   left: 0;
-}.after\:left-1\/2::after {
-  content: var(--tw-content);
-  left: 50%;
 }.after\:left-\[-0\.125rem\]::after {
   content: var(--tw-content);
   left: -0.125rem;
@@ -4439,9 +4468,6 @@ video {
 }.after\:top-0::after {
   content: var(--tw-content);
   top: 0;
-}.after\:top-1\/2::after {
-  content: var(--tw-content);
-  top: 50%;
 }.after\:top-\[-12px\]::after {
   content: var(--tw-content);
   top: -12px;
@@ -4469,9 +4495,6 @@ video {
 }.after\:h-\[2\.875rem\]::after {
   content: var(--tw-content);
   height: 2.875rem;
-}.after\:h-full::after {
-  content: var(--tw-content);
-  height: 100%;
 }.after\:w-0::after {
   content: var(--tw-content);
   width: 0;
@@ -4487,21 +4510,10 @@ video {
 }.after\:w-\[2\.875rem\]::after {
   content: var(--tw-content);
   width: 2.875rem;
-}.after\:w-\[2px\]::after {
-  content: var(--tw-content);
-  width: 2px;
-}.after\:-translate-x-1\/2::after {
-  content: var(--tw-content);
-  --tw-translate-x: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }.after\:-translate-x-full::after {
   content: var(--tw-content);
   --tw-translate-x: -100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}.after\:-translate-y-1\/2::after {
-  content: var(--tw-content);
-  --tw-translate-y: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }.after\:translate-x-\[-7px\]::after {
   content: var(--tw-content);
   --tw-translate-x: -7px;
@@ -4579,10 +4591,6 @@ video {
   content: var(--tw-content);
   --tw-border-opacity: 1;
   border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
-}.after\:bg-muted::after {
-  content: var(--tw-content);
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
 }.after\:bg-white::after {
   content: var(--tw-content);
   --tw-bg-opacity: 1;
@@ -4602,11 +4610,6 @@ video {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
-}.after\:transition-transform::after {
-  content: var(--tw-content);
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
 }.after\:duration-\[\.3s\]::after {
   content: var(--tw-content);
   transition-duration: .3s;
@@ -4615,6 +4618,8 @@ video {
 }.before\:first\:hidden:first-child::before {
   content: var(--tw-content);
   display: none;
+}.last\:mb-0:last-child {
+  margin-bottom: 0;
 }.last\:border-b-0:last-child {
   border-bottom-width: 0px;
 }.last\:border-r-0:last-child {
@@ -4756,17 +4761,17 @@ video {
   pointer-events: none;
 }.disabled\:opacity-50:disabled {
   opacity: 0.5;
-}.group\/buttons:first-child .group-first\/buttons\:rounded-l {
-  border-top-left-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+}.group\/buttons:first-child .group-first\/buttons\:rounded-l-\[0\.1875rem\] {
+  border-top-left-radius: 0.1875rem;
+  border-bottom-left-radius: 0.1875rem;
 }.group\/panel:first-child .group-first\/panel\:px-4 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }.group\/panel:first-child .group-first\/panel\:pt-4 {
   padding-top: 1.5rem;
-}.group\/buttons:last-child .group-last\/buttons\:rounded-r {
-  border-top-right-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
+}.group\/buttons:last-child .group-last\/buttons\:rounded-r-\[0\.1875rem\] {
+  border-top-right-radius: 0.1875rem;
+  border-bottom-right-radius: 0.1875rem;
 }.group\/checkbox-option:hover .group-hover\/checkbox-option\:translate-x-1 {
   --tw-translate-x: 0.375rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -4896,6 +4901,9 @@ video {
 }.theme-rams .active-theme-rams\:hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
+}@media not all and (min-width: 768px) {.max-sm\:hidden {
+    display: none;
+  }
 }@media not all and (min-width: 576px) {.group\/panel:first-child .max-xsl\:group-first\/panel\:px-2 {
     padding-left: 0.75rem;
     padding-right: 0.75rem;
@@ -4924,6 +4932,8 @@ video {
     top: 0.3125rem;
   }.xsl\:top-\[0\.375rem\] {
     top: 0.375rem;
+  }.xsl\:z-10 {
+    z-index: 10;
   }.xsl\:col-span-1 {
     grid-column: span 1 / span 1;
   }.xsl\:col-span-10 {
@@ -4994,6 +5004,8 @@ video {
     margin-bottom: 1.5rem;
   }.xsl\:mb-\[-1px\] {
     margin-bottom: -1px;
+  }.xsl\:ml-\[-1px\] {
+    margin-left: -1px;
   }.xsl\:mr-2 {
     margin-right: 0.75rem;
   }.xsl\:mr-3 {
@@ -5099,9 +5111,6 @@ video {
   }.xsl\:rotate-45 {
     --tw-rotate: 45deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }.xsl\:rotate-90 {
-    --tw-rotate: 90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.xsl\:rotate-\[-44deg\] {
     --tw-rotate: -44deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -5133,6 +5142,8 @@ video {
     justify-content: space-between;
   }.xsl\:gap-4 {
     gap: 1.5rem;
+  }.xsl\:gap-5 {
+    gap: 1.875rem;
   }.xsl\:gap-\[2px\] {
     gap: 2px;
   }.xsl\:self-center {
@@ -5143,8 +5154,8 @@ video {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-  }.xsl\:rounded {
-    border-radius: 0.25rem;
+  }.xsl\:rounded-\[0\.1875rem\] {
+    border-radius: 0.1875rem;
   }.xsl\:rounded-\[0\.625rem\] {
     border-radius: 0.625rem;
   }.xsl\:rounded-\[1\.5rem\] {
@@ -5256,9 +5267,6 @@ video {
   }.xsl\:border-b-primary {
     --tw-border-opacity: 1;
     border-bottom-color: rgba(var(--colors-primary), var(--tw-border-opacity));
-  }.xsl\:border-l-border {
-    --tw-border-opacity: 1;
-    border-left-color: rgba(var(--colors-border), var(--tw-border-opacity));
   }.xsl\:border-l-primary {
     --tw-border-opacity: 1;
     border-left-color: rgba(var(--colors-primary), var(--tw-border-opacity));
@@ -5363,8 +5371,6 @@ video {
     padding-top: 0.5625rem;
   }.xsl\:pt-\[0\.625rem\] {
     padding-top: 0.625rem;
-  }.xsl\:pt-\[0\.875rem\] {
-    padding-top: 0.875rem;
   }.xsl\:text-\[0\.75rem\] {
     font-size: 0.75rem;
   }.xsl\:font-bold {
@@ -5465,24 +5471,11 @@ video {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
-  }.xsl\:transition-transform {
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
   }.xsl\:focus-outline {
     outline-style: solid;
     outline-width: 2px;
     outline-offset: 3px;
     outline-color: rgb(var(--colors-focus));
-  }.xsl\:before\:absolute::before {
-    content: var(--tw-content);
-    position: absolute;
-  }.xsl\:before\:left-1\/2::before {
-    content: var(--tw-content);
-    left: 50%;
-  }.xsl\:before\:top-1\/2::before {
-    content: var(--tw-content);
-    top: 50%;
   }.xsl\:before\:block::before {
     content: var(--tw-content);
     display: block;
@@ -5492,23 +5485,9 @@ video {
   }.xsl\:before\:h-2::before {
     content: var(--tw-content);
     height: 0.75rem;
-  }.xsl\:before\:h-\[2px\]::before {
-    content: var(--tw-content);
-    height: 2px;
   }.xsl\:before\:w-2::before {
     content: var(--tw-content);
     width: 0.75rem;
-  }.xsl\:before\:w-full::before {
-    content: var(--tw-content);
-    width: 100%;
-  }.xsl\:before\:-translate-x-1\/2::before {
-    content: var(--tw-content);
-    --tw-translate-x: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }.xsl\:before\:-translate-y-1\/2::before {
-    content: var(--tw-content);
-    --tw-translate-y: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.xsl\:before\:rounded-full::before {
     content: var(--tw-content);
     border-radius: 9999px;
@@ -5531,25 +5510,15 @@ video {
     content: var(--tw-content);
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-hero), var(--tw-bg-opacity));
-  }.xsl\:before\:bg-muted::before {
-    content: var(--tw-content);
-    --tw-bg-opacity: 1;
-    background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
   }.xsl\:after\:absolute::after {
     content: var(--tw-content);
     position: absolute;
-  }.xsl\:after\:left-1\/2::after {
-    content: var(--tw-content);
-    left: 50%;
   }.xsl\:after\:left-\[-0\.125rem\]::after {
     content: var(--tw-content);
     left: -0.125rem;
   }.xsl\:after\:left-full::after {
     content: var(--tw-content);
     left: 100%;
-  }.xsl\:after\:top-1\/2::after {
-    content: var(--tw-content);
-    top: 50%;
   }.xsl\:after\:block::after {
     content: var(--tw-content);
     display: block;
@@ -5568,9 +5537,6 @@ video {
   }.xsl\:after\:h-\[2\.875rem\]::after {
     content: var(--tw-content);
     height: 2.875rem;
-  }.xsl\:after\:h-full::after {
-    content: var(--tw-content);
-    height: 100%;
   }.xsl\:after\:w-0::after {
     content: var(--tw-content);
     width: 0;
@@ -5586,21 +5552,10 @@ video {
   }.xsl\:after\:w-\[2\.875rem\]::after {
     content: var(--tw-content);
     width: 2.875rem;
-  }.xsl\:after\:w-\[2px\]::after {
-    content: var(--tw-content);
-    width: 2px;
-  }.xsl\:after\:-translate-x-1\/2::after {
-    content: var(--tw-content);
-    --tw-translate-x: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.xsl\:after\:-translate-x-full::after {
     content: var(--tw-content);
     --tw-translate-x: -100%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }.xsl\:after\:-translate-y-1\/2::after {
-    content: var(--tw-content);
-    --tw-translate-y: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.xsl\:after\:rotate-90::after {
     content: var(--tw-content);
     --tw-rotate: 90deg;
@@ -5649,15 +5604,6 @@ video {
     content: var(--tw-content);
     --tw-border-opacity: 1;
     border-color: rgb(0 128 0 / var(--tw-border-opacity));
-  }.xsl\:after\:bg-muted::after {
-    content: var(--tw-content);
-    --tw-bg-opacity: 1;
-    background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
-  }.xsl\:after\:transition-transform::after {
-    content: var(--tw-content);
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
   }.xsl\:before\:first\:hidden:first-child::before {
     content: var(--tw-content);
     display: none;
@@ -5802,6 +5748,8 @@ video {
     top: 0.3125rem;
   }.sm\:top-\[0\.375rem\] {
     top: 0.375rem;
+  }.sm\:z-10 {
+    z-index: 10;
   }.sm\:col-span-1 {
     grid-column: span 1 / span 1;
   }.sm\:col-span-10 {
@@ -5874,6 +5822,8 @@ video {
     margin-bottom: 1.875rem;
   }.sm\:mb-\[-1px\] {
     margin-bottom: -1px;
+  }.sm\:ml-\[-1px\] {
+    margin-left: -1px;
   }.sm\:mr-3 {
     margin-right: 1.125rem;
   }.sm\:mr-\[-1px\] {
@@ -5889,6 +5839,8 @@ video {
     }
   }.sm\:flex {
     display: flex;
+  }.sm\:hidden {
+    display: none;
   }.sm\:h-2 {
     height: 0.75rem;
   }.sm\:h-3 {
@@ -5987,9 +5939,6 @@ video {
   }.sm\:rotate-45 {
     --tw-rotate: 45deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }.sm\:rotate-90 {
-    --tw-rotate: 90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.sm\:rotate-\[-44deg\] {
     --tw-rotate: -44deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -6021,6 +5970,8 @@ video {
     justify-content: space-between;
   }.sm\:gap-4 {
     gap: 1.5rem;
+  }.sm\:gap-5 {
+    gap: 1.875rem;
   }.sm\:gap-\[2px\] {
     gap: 2px;
   }.sm\:self-center {
@@ -6031,8 +5982,8 @@ video {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-  }.sm\:rounded {
-    border-radius: 0.25rem;
+  }.sm\:rounded-\[0\.1875rem\] {
+    border-radius: 0.1875rem;
   }.sm\:rounded-\[0\.625rem\] {
     border-radius: 0.625rem;
   }.sm\:rounded-\[1\.5rem\] {
@@ -6144,9 +6095,6 @@ video {
   }.sm\:border-b-primary {
     --tw-border-opacity: 1;
     border-bottom-color: rgba(var(--colors-primary), var(--tw-border-opacity));
-  }.sm\:border-l-border {
-    --tw-border-opacity: 1;
-    border-left-color: rgba(var(--colors-border), var(--tw-border-opacity));
   }.sm\:border-l-primary {
     --tw-border-opacity: 1;
     border-left-color: rgba(var(--colors-primary), var(--tw-border-opacity));
@@ -6257,8 +6205,6 @@ video {
     padding-top: 0.5625rem;
   }.sm\:pt-\[0\.625rem\] {
     padding-top: 0.625rem;
-  }.sm\:pt-\[0\.875rem\] {
-    padding-top: 0.875rem;
   }.sm\:align-middle {
     vertical-align: middle;
   }@media (min-width: 768px) {.sm\:sm\:align-middle {
@@ -6364,24 +6310,11 @@ video {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
-  }.sm\:transition-transform {
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
   }.sm\:focus-outline {
     outline-style: solid;
     outline-width: 2px;
     outline-offset: 3px;
     outline-color: rgb(var(--colors-focus));
-  }.sm\:before\:absolute::before {
-    content: var(--tw-content);
-    position: absolute;
-  }.sm\:before\:left-1\/2::before {
-    content: var(--tw-content);
-    left: 50%;
-  }.sm\:before\:top-1\/2::before {
-    content: var(--tw-content);
-    top: 50%;
   }.sm\:before\:block::before {
     content: var(--tw-content);
     display: block;
@@ -6391,23 +6324,9 @@ video {
   }.sm\:before\:h-2::before {
     content: var(--tw-content);
     height: 0.75rem;
-  }.sm\:before\:h-\[2px\]::before {
-    content: var(--tw-content);
-    height: 2px;
   }.sm\:before\:w-2::before {
     content: var(--tw-content);
     width: 0.75rem;
-  }.sm\:before\:w-full::before {
-    content: var(--tw-content);
-    width: 100%;
-  }.sm\:before\:-translate-x-1\/2::before {
-    content: var(--tw-content);
-    --tw-translate-x: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }.sm\:before\:-translate-y-1\/2::before {
-    content: var(--tw-content);
-    --tw-translate-y: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.sm\:before\:rounded-full::before {
     content: var(--tw-content);
     border-radius: 9999px;
@@ -6430,25 +6349,15 @@ video {
     content: var(--tw-content);
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-hero), var(--tw-bg-opacity));
-  }.sm\:before\:bg-muted::before {
-    content: var(--tw-content);
-    --tw-bg-opacity: 1;
-    background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
   }.sm\:after\:absolute::after {
     content: var(--tw-content);
     position: absolute;
-  }.sm\:after\:left-1\/2::after {
-    content: var(--tw-content);
-    left: 50%;
   }.sm\:after\:left-\[-0\.125rem\]::after {
     content: var(--tw-content);
     left: -0.125rem;
   }.sm\:after\:left-full::after {
     content: var(--tw-content);
     left: 100%;
-  }.sm\:after\:top-1\/2::after {
-    content: var(--tw-content);
-    top: 50%;
   }.sm\:after\:block::after {
     content: var(--tw-content);
     display: block;
@@ -6467,9 +6376,6 @@ video {
   }.sm\:after\:h-\[2\.875rem\]::after {
     content: var(--tw-content);
     height: 2.875rem;
-  }.sm\:after\:h-full::after {
-    content: var(--tw-content);
-    height: 100%;
   }.sm\:after\:w-0::after {
     content: var(--tw-content);
     width: 0;
@@ -6485,21 +6391,10 @@ video {
   }.sm\:after\:w-\[2\.875rem\]::after {
     content: var(--tw-content);
     width: 2.875rem;
-  }.sm\:after\:w-\[2px\]::after {
-    content: var(--tw-content);
-    width: 2px;
-  }.sm\:after\:-translate-x-1\/2::after {
-    content: var(--tw-content);
-    --tw-translate-x: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.sm\:after\:-translate-x-full::after {
     content: var(--tw-content);
     --tw-translate-x: -100%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }.sm\:after\:-translate-y-1\/2::after {
-    content: var(--tw-content);
-    --tw-translate-y: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.sm\:after\:rotate-90::after {
     content: var(--tw-content);
     --tw-rotate: 90deg;
@@ -6548,15 +6443,6 @@ video {
     content: var(--tw-content);
     --tw-border-opacity: 1;
     border-color: rgb(0 128 0 / var(--tw-border-opacity));
-  }.sm\:after\:bg-muted::after {
-    content: var(--tw-content);
-    --tw-bg-opacity: 1;
-    background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
-  }.sm\:after\:transition-transform::after {
-    content: var(--tw-content);
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
   }.sm\:before\:first\:hidden:first-child::before {
     content: var(--tw-content);
     display: none;
@@ -6709,6 +6595,8 @@ video {
     top: 0.3125rem;
   }.md\:top-\[0\.375rem\] {
     top: 0.375rem;
+  }.md\:z-10 {
+    z-index: 10;
   }.md\:col-span-1 {
     grid-column: span 1 / span 1;
   }.md\:col-span-10 {
@@ -6779,6 +6667,8 @@ video {
     margin-bottom: 1.5rem;
   }.md\:mb-\[-1px\] {
     margin-bottom: -1px;
+  }.md\:ml-\[-1px\] {
+    margin-left: -1px;
   }.md\:mr-3 {
     margin-right: 1.125rem;
   }.md\:mr-\[-1px\] {
@@ -6887,9 +6777,6 @@ video {
   }.md\:rotate-45 {
     --tw-rotate: 45deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }.md\:rotate-90 {
-    --tw-rotate: 90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.md\:rotate-\[-44deg\] {
     --tw-rotate: -44deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -6923,6 +6810,8 @@ video {
     gap: 1.125rem;
   }.md\:gap-4 {
     gap: 1.5rem;
+  }.md\:gap-5 {
+    gap: 1.875rem;
   }.md\:gap-\[2px\] {
     gap: 2px;
   }.md\:self-center {
@@ -6933,8 +6822,8 @@ video {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-  }.md\:rounded {
-    border-radius: 0.25rem;
+  }.md\:rounded-\[0\.1875rem\] {
+    border-radius: 0.1875rem;
   }.md\:rounded-\[0\.625rem\] {
     border-radius: 0.625rem;
   }.md\:rounded-\[1\.5rem\] {
@@ -7046,9 +6935,6 @@ video {
   }.md\:border-b-primary {
     --tw-border-opacity: 1;
     border-bottom-color: rgba(var(--colors-primary), var(--tw-border-opacity));
-  }.md\:border-l-border {
-    --tw-border-opacity: 1;
-    border-left-color: rgba(var(--colors-border), var(--tw-border-opacity));
   }.md\:border-l-primary {
     --tw-border-opacity: 1;
     border-left-color: rgba(var(--colors-primary), var(--tw-border-opacity));
@@ -7154,8 +7040,6 @@ video {
     padding-top: 0.5625rem;
   }.md\:pt-\[0\.625rem\] {
     padding-top: 0.625rem;
-  }.md\:pt-\[0\.875rem\] {
-    padding-top: 0.875rem;
   }.md\:text-\[0\.75rem\] {
     font-size: 0.75rem;
   }.md\:font-bold {
@@ -7256,24 +7140,11 @@ video {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
-  }.md\:transition-transform {
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
   }.md\:focus-outline {
     outline-style: solid;
     outline-width: 2px;
     outline-offset: 3px;
     outline-color: rgb(var(--colors-focus));
-  }.md\:before\:absolute::before {
-    content: var(--tw-content);
-    position: absolute;
-  }.md\:before\:left-1\/2::before {
-    content: var(--tw-content);
-    left: 50%;
-  }.md\:before\:top-1\/2::before {
-    content: var(--tw-content);
-    top: 50%;
   }.md\:before\:block::before {
     content: var(--tw-content);
     display: block;
@@ -7283,23 +7154,9 @@ video {
   }.md\:before\:h-2::before {
     content: var(--tw-content);
     height: 0.75rem;
-  }.md\:before\:h-\[2px\]::before {
-    content: var(--tw-content);
-    height: 2px;
   }.md\:before\:w-2::before {
     content: var(--tw-content);
     width: 0.75rem;
-  }.md\:before\:w-full::before {
-    content: var(--tw-content);
-    width: 100%;
-  }.md\:before\:-translate-x-1\/2::before {
-    content: var(--tw-content);
-    --tw-translate-x: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }.md\:before\:-translate-y-1\/2::before {
-    content: var(--tw-content);
-    --tw-translate-y: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.md\:before\:rounded-full::before {
     content: var(--tw-content);
     border-radius: 9999px;
@@ -7322,25 +7179,15 @@ video {
     content: var(--tw-content);
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-hero), var(--tw-bg-opacity));
-  }.md\:before\:bg-muted::before {
-    content: var(--tw-content);
-    --tw-bg-opacity: 1;
-    background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
   }.md\:after\:absolute::after {
     content: var(--tw-content);
     position: absolute;
-  }.md\:after\:left-1\/2::after {
-    content: var(--tw-content);
-    left: 50%;
   }.md\:after\:left-\[-0\.125rem\]::after {
     content: var(--tw-content);
     left: -0.125rem;
   }.md\:after\:left-full::after {
     content: var(--tw-content);
     left: 100%;
-  }.md\:after\:top-1\/2::after {
-    content: var(--tw-content);
-    top: 50%;
   }.md\:after\:block::after {
     content: var(--tw-content);
     display: block;
@@ -7359,9 +7206,6 @@ video {
   }.md\:after\:h-\[2\.875rem\]::after {
     content: var(--tw-content);
     height: 2.875rem;
-  }.md\:after\:h-full::after {
-    content: var(--tw-content);
-    height: 100%;
   }.md\:after\:w-0::after {
     content: var(--tw-content);
     width: 0;
@@ -7377,21 +7221,10 @@ video {
   }.md\:after\:w-\[2\.875rem\]::after {
     content: var(--tw-content);
     width: 2.875rem;
-  }.md\:after\:w-\[2px\]::after {
-    content: var(--tw-content);
-    width: 2px;
-  }.md\:after\:-translate-x-1\/2::after {
-    content: var(--tw-content);
-    --tw-translate-x: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.md\:after\:-translate-x-full::after {
     content: var(--tw-content);
     --tw-translate-x: -100%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }.md\:after\:-translate-y-1\/2::after {
-    content: var(--tw-content);
-    --tw-translate-y: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.md\:after\:rotate-90::after {
     content: var(--tw-content);
     --tw-rotate: 90deg;
@@ -7440,15 +7273,6 @@ video {
     content: var(--tw-content);
     --tw-border-opacity: 1;
     border-color: rgb(0 128 0 / var(--tw-border-opacity));
-  }.md\:after\:bg-muted::after {
-    content: var(--tw-content);
-    --tw-bg-opacity: 1;
-    background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
-  }.md\:after\:transition-transform::after {
-    content: var(--tw-content);
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
   }.md\:before\:first\:hidden:first-child::before {
     content: var(--tw-content);
     display: none;
@@ -7608,6 +7432,8 @@ video {
     top: 0.3125rem;
   }.lg\:top-\[0\.375rem\] {
     top: 0.375rem;
+  }.lg\:z-10 {
+    z-index: 10;
   }.lg\:col-span-1 {
     grid-column: span 1 / span 1;
   }.lg\:col-span-10 {
@@ -7678,6 +7504,8 @@ video {
     margin-bottom: 1.5rem;
   }.lg\:mb-\[-1px\] {
     margin-bottom: -1px;
+  }.lg\:ml-\[-1px\] {
+    margin-left: -1px;
   }.lg\:mr-3 {
     margin-right: 1.125rem;
   }.lg\:mr-\[-1px\] {
@@ -7786,9 +7614,6 @@ video {
   }.lg\:rotate-45 {
     --tw-rotate: 45deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }.lg\:rotate-90 {
-    --tw-rotate: 90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.lg\:rotate-\[-44deg\] {
     --tw-rotate: -44deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -7820,6 +7645,8 @@ video {
     justify-content: space-between;
   }.lg\:gap-4 {
     gap: 1.5rem;
+  }.lg\:gap-5 {
+    gap: 1.875rem;
   }.lg\:gap-\[2px\] {
     gap: 2px;
   }.lg\:self-center {
@@ -7830,8 +7657,8 @@ video {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-  }.lg\:rounded {
-    border-radius: 0.25rem;
+  }.lg\:rounded-\[0\.1875rem\] {
+    border-radius: 0.1875rem;
   }.lg\:rounded-\[0\.625rem\] {
     border-radius: 0.625rem;
   }.lg\:rounded-\[1\.5rem\] {
@@ -7943,9 +7770,6 @@ video {
   }.lg\:border-b-primary {
     --tw-border-opacity: 1;
     border-bottom-color: rgba(var(--colors-primary), var(--tw-border-opacity));
-  }.lg\:border-l-border {
-    --tw-border-opacity: 1;
-    border-left-color: rgba(var(--colors-border), var(--tw-border-opacity));
   }.lg\:border-l-primary {
     --tw-border-opacity: 1;
     border-left-color: rgba(var(--colors-primary), var(--tw-border-opacity));
@@ -8051,8 +7875,6 @@ video {
     padding-top: 0.5625rem;
   }.lg\:pt-\[0\.625rem\] {
     padding-top: 0.625rem;
-  }.lg\:pt-\[0\.875rem\] {
-    padding-top: 0.875rem;
   }.lg\:text-\[0\.75rem\] {
     font-size: 0.75rem;
   }.lg\:font-bold {
@@ -8153,24 +7975,11 @@ video {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
-  }.lg\:transition-transform {
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
   }.lg\:focus-outline {
     outline-style: solid;
     outline-width: 2px;
     outline-offset: 3px;
     outline-color: rgb(var(--colors-focus));
-  }.lg\:before\:absolute::before {
-    content: var(--tw-content);
-    position: absolute;
-  }.lg\:before\:left-1\/2::before {
-    content: var(--tw-content);
-    left: 50%;
-  }.lg\:before\:top-1\/2::before {
-    content: var(--tw-content);
-    top: 50%;
   }.lg\:before\:block::before {
     content: var(--tw-content);
     display: block;
@@ -8180,23 +7989,9 @@ video {
   }.lg\:before\:h-2::before {
     content: var(--tw-content);
     height: 0.75rem;
-  }.lg\:before\:h-\[2px\]::before {
-    content: var(--tw-content);
-    height: 2px;
   }.lg\:before\:w-2::before {
     content: var(--tw-content);
     width: 0.75rem;
-  }.lg\:before\:w-full::before {
-    content: var(--tw-content);
-    width: 100%;
-  }.lg\:before\:-translate-x-1\/2::before {
-    content: var(--tw-content);
-    --tw-translate-x: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }.lg\:before\:-translate-y-1\/2::before {
-    content: var(--tw-content);
-    --tw-translate-y: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.lg\:before\:rounded-full::before {
     content: var(--tw-content);
     border-radius: 9999px;
@@ -8219,25 +8014,15 @@ video {
     content: var(--tw-content);
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-hero), var(--tw-bg-opacity));
-  }.lg\:before\:bg-muted::before {
-    content: var(--tw-content);
-    --tw-bg-opacity: 1;
-    background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
   }.lg\:after\:absolute::after {
     content: var(--tw-content);
     position: absolute;
-  }.lg\:after\:left-1\/2::after {
-    content: var(--tw-content);
-    left: 50%;
   }.lg\:after\:left-\[-0\.125rem\]::after {
     content: var(--tw-content);
     left: -0.125rem;
   }.lg\:after\:left-full::after {
     content: var(--tw-content);
     left: 100%;
-  }.lg\:after\:top-1\/2::after {
-    content: var(--tw-content);
-    top: 50%;
   }.lg\:after\:block::after {
     content: var(--tw-content);
     display: block;
@@ -8256,9 +8041,6 @@ video {
   }.lg\:after\:h-\[2\.875rem\]::after {
     content: var(--tw-content);
     height: 2.875rem;
-  }.lg\:after\:h-full::after {
-    content: var(--tw-content);
-    height: 100%;
   }.lg\:after\:w-0::after {
     content: var(--tw-content);
     width: 0;
@@ -8274,21 +8056,10 @@ video {
   }.lg\:after\:w-\[2\.875rem\]::after {
     content: var(--tw-content);
     width: 2.875rem;
-  }.lg\:after\:w-\[2px\]::after {
-    content: var(--tw-content);
-    width: 2px;
-  }.lg\:after\:-translate-x-1\/2::after {
-    content: var(--tw-content);
-    --tw-translate-x: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.lg\:after\:-translate-x-full::after {
     content: var(--tw-content);
     --tw-translate-x: -100%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }.lg\:after\:-translate-y-1\/2::after {
-    content: var(--tw-content);
-    --tw-translate-y: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.lg\:after\:rotate-90::after {
     content: var(--tw-content);
     --tw-rotate: 90deg;
@@ -8337,15 +8108,6 @@ video {
     content: var(--tw-content);
     --tw-border-opacity: 1;
     border-color: rgb(0 128 0 / var(--tw-border-opacity));
-  }.lg\:after\:bg-muted::after {
-    content: var(--tw-content);
-    --tw-bg-opacity: 1;
-    background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
-  }.lg\:after\:transition-transform::after {
-    content: var(--tw-content);
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
   }.lg\:before\:first\:hidden:first-child::before {
     content: var(--tw-content);
     display: none;
@@ -8496,6 +8258,8 @@ video {
     top: 0.3125rem;
   }.xl\:top-\[0\.375rem\] {
     top: 0.375rem;
+  }.xl\:z-10 {
+    z-index: 10;
   }.xl\:col-span-1 {
     grid-column: span 1 / span 1;
   }.xl\:col-span-10 {
@@ -8566,6 +8330,8 @@ video {
     margin-bottom: 1.5rem;
   }.xl\:mb-\[-1px\] {
     margin-bottom: -1px;
+  }.xl\:ml-\[-1px\] {
+    margin-left: -1px;
   }.xl\:mr-3 {
     margin-right: 1.125rem;
   }.xl\:mr-\[-1px\] {
@@ -8669,9 +8435,6 @@ video {
   }.xl\:rotate-45 {
     --tw-rotate: 45deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }.xl\:rotate-90 {
-    --tw-rotate: 90deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.xl\:rotate-\[-44deg\] {
     --tw-rotate: -44deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -8703,6 +8466,8 @@ video {
     justify-content: space-between;
   }.xl\:gap-4 {
     gap: 1.5rem;
+  }.xl\:gap-5 {
+    gap: 1.875rem;
   }.xl\:gap-\[2px\] {
     gap: 2px;
   }.xl\:self-center {
@@ -8713,8 +8478,8 @@ video {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-  }.xl\:rounded {
-    border-radius: 0.25rem;
+  }.xl\:rounded-\[0\.1875rem\] {
+    border-radius: 0.1875rem;
   }.xl\:rounded-\[0\.625rem\] {
     border-radius: 0.625rem;
   }.xl\:rounded-\[1\.5rem\] {
@@ -8826,9 +8591,6 @@ video {
   }.xl\:border-b-primary {
     --tw-border-opacity: 1;
     border-bottom-color: rgba(var(--colors-primary), var(--tw-border-opacity));
-  }.xl\:border-l-border {
-    --tw-border-opacity: 1;
-    border-left-color: rgba(var(--colors-border), var(--tw-border-opacity));
   }.xl\:border-l-primary {
     --tw-border-opacity: 1;
     border-left-color: rgba(var(--colors-primary), var(--tw-border-opacity));
@@ -8928,8 +8690,6 @@ video {
     padding-top: 0.5625rem;
   }.xl\:pt-\[0\.625rem\] {
     padding-top: 0.625rem;
-  }.xl\:pt-\[0\.875rem\] {
-    padding-top: 0.875rem;
   }.xl\:text-\[0\.75rem\] {
     font-size: 0.75rem;
   }.xl\:font-bold {
@@ -9030,24 +8790,11 @@ video {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
-  }.xl\:transition-transform {
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
   }.xl\:focus-outline {
     outline-style: solid;
     outline-width: 2px;
     outline-offset: 3px;
     outline-color: rgb(var(--colors-focus));
-  }.xl\:before\:absolute::before {
-    content: var(--tw-content);
-    position: absolute;
-  }.xl\:before\:left-1\/2::before {
-    content: var(--tw-content);
-    left: 50%;
-  }.xl\:before\:top-1\/2::before {
-    content: var(--tw-content);
-    top: 50%;
   }.xl\:before\:block::before {
     content: var(--tw-content);
     display: block;
@@ -9057,23 +8804,9 @@ video {
   }.xl\:before\:h-2::before {
     content: var(--tw-content);
     height: 0.75rem;
-  }.xl\:before\:h-\[2px\]::before {
-    content: var(--tw-content);
-    height: 2px;
   }.xl\:before\:w-2::before {
     content: var(--tw-content);
     width: 0.75rem;
-  }.xl\:before\:w-full::before {
-    content: var(--tw-content);
-    width: 100%;
-  }.xl\:before\:-translate-x-1\/2::before {
-    content: var(--tw-content);
-    --tw-translate-x: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }.xl\:before\:-translate-y-1\/2::before {
-    content: var(--tw-content);
-    --tw-translate-y: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.xl\:before\:rounded-full::before {
     content: var(--tw-content);
     border-radius: 9999px;
@@ -9096,25 +8829,15 @@ video {
     content: var(--tw-content);
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-hero), var(--tw-bg-opacity));
-  }.xl\:before\:bg-muted::before {
-    content: var(--tw-content);
-    --tw-bg-opacity: 1;
-    background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
   }.xl\:after\:absolute::after {
     content: var(--tw-content);
     position: absolute;
-  }.xl\:after\:left-1\/2::after {
-    content: var(--tw-content);
-    left: 50%;
   }.xl\:after\:left-\[-0\.125rem\]::after {
     content: var(--tw-content);
     left: -0.125rem;
   }.xl\:after\:left-full::after {
     content: var(--tw-content);
     left: 100%;
-  }.xl\:after\:top-1\/2::after {
-    content: var(--tw-content);
-    top: 50%;
   }.xl\:after\:block::after {
     content: var(--tw-content);
     display: block;
@@ -9133,9 +8856,6 @@ video {
   }.xl\:after\:h-\[2\.875rem\]::after {
     content: var(--tw-content);
     height: 2.875rem;
-  }.xl\:after\:h-full::after {
-    content: var(--tw-content);
-    height: 100%;
   }.xl\:after\:w-0::after {
     content: var(--tw-content);
     width: 0;
@@ -9151,21 +8871,10 @@ video {
   }.xl\:after\:w-\[2\.875rem\]::after {
     content: var(--tw-content);
     width: 2.875rem;
-  }.xl\:after\:w-\[2px\]::after {
-    content: var(--tw-content);
-    width: 2px;
-  }.xl\:after\:-translate-x-1\/2::after {
-    content: var(--tw-content);
-    --tw-translate-x: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.xl\:after\:-translate-x-full::after {
     content: var(--tw-content);
     --tw-translate-x: -100%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }.xl\:after\:-translate-y-1\/2::after {
-    content: var(--tw-content);
-    --tw-translate-y: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.xl\:after\:rotate-90::after {
     content: var(--tw-content);
     --tw-rotate: 90deg;
@@ -9214,15 +8923,6 @@ video {
     content: var(--tw-content);
     --tw-border-opacity: 1;
     border-color: rgb(0 128 0 / var(--tw-border-opacity));
-  }.xl\:after\:bg-muted::after {
-    content: var(--tw-content);
-    --tw-bg-opacity: 1;
-    background-color: rgba(var(--colors-muted), var(--tw-bg-opacity));
-  }.xl\:after\:transition-transform::after {
-    content: var(--tw-content);
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
   }.xl\:before\:first\:hidden:first-child::before {
     content: var(--tw-content);
     display: none;