@westpac/ui 0.49.0 → 0.50.3

package/dist/css/westpac-ui.min.css

@@ -2816,6 +2816,11 @@ body {
   line-height: 1.2;
   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-8 {
+  font-size: 1.125rem !important;
+  line-height: 1.4 !important;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
+}
 .typography-body-8 {
   font-size: 1.125rem;
   line-height: 1.4;
@@ -3264,6 +3269,9 @@ body {
 .static {
   position: static;
 }
+.\!fixed {
+  position: fixed !important;
+}
 .fixed {
   position: fixed;
 }
@@ -3287,6 +3295,15 @@ body {
   top: 0rem;
   bottom: 0rem;
 }
+.\!bottom-0 {
+  bottom: 0rem !important;
+}
+.\!left-0 {
+  left: 0rem !important;
+}
+.\!top-auto {
+  top: auto !important;
+}
 .-left-1 {
   left: -0.375rem;
 }
@@ -3332,6 +3349,9 @@ body {
 .top-1 {
   top: 0.375rem;
 }
+.top-1\/2 {
+  top: 50%;
+}
 .top-3 {
   top: 1.125rem;
 }
@@ -3473,6 +3493,14 @@ body {
   margin-left: -1.5rem;
   margin-right: -1.5rem;
 }
+.-my-0\.5 {
+  margin-top: -0.1875rem;
+  margin-bottom: -0.1875rem;
+}
+.-my-1\.5 {
+  margin-top: -0.5625rem;
+  margin-bottom: -0.5625rem;
+}
 .-my-2 {
   margin-top: -0.75rem;
   margin-bottom: -0.75rem;
@@ -3485,6 +3513,10 @@ body {
   margin-left: 1.125rem;
   margin-right: 1.125rem;
 }
+.mx-\[-8vw\] {
+  margin-left: -8vw;
+  margin-right: -8vw;
+}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -3513,6 +3545,14 @@ body {
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
 }
+.my-\[-0\.3125rem\] {
+  margin-top: -0.3125rem;
+  margin-bottom: -0.3125rem;
+}
+.my-\[-0\.5rem\] {
+  margin-top: -0.5rem;
+  margin-bottom: -0.5rem;
+}
 .\!mb-0 {
   margin-bottom: 0rem !important;
 }
@@ -3522,6 +3562,18 @@ body {
 .-ml-2 {
   margin-left: -0.75rem;
 }
+.-mr-1\.5 {
+  margin-right: -0.5625rem;
+}
+.-mr-2 {
+  margin-right: -0.75rem;
+}
+.-mr-2\.5 {
+  margin-right: -0.9375rem;
+}
+.-mr-3 {
+  margin-right: -1.125rem;
+}
 .-mt-1 {
   margin-top: -0.375rem;
 }
@@ -3549,6 +3601,12 @@ body {
 .mb-5 {
   margin-bottom: 1.875rem;
 }
+.mb-\[-0\.25rem\] {
+  margin-bottom: -0.25rem;
+}
+.mb-\[-0\.625rem\] {
+  margin-bottom: -0.625rem;
+}
 .mb-\[-1px\] {
   margin-bottom: -1px;
 }
@@ -3891,6 +3949,18 @@ body {
 .min-h-12 {
   min-height: 4.5rem;
 }
+.min-h-5 {
+  min-height: 1.875rem;
+}
+.min-h-6 {
+  min-height: 2.25rem;
+}
+.min-h-7 {
+  min-height: 2.625rem;
+}
+.min-h-8 {
+  min-height: 3rem;
+}
 .min-h-9 {
   min-height: 3.375rem;
 }
@@ -4128,10 +4198,18 @@ body {
   --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));
 }
+.-translate-y-1\/2 {
+  --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));
+}
 .translate-x-0 {
   --tw-translate-x: 0rem;
   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));
 }
+.translate-x-1\/2 {
+  --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));
+}
 .translate-x-\[-6px\] {
   --tw-translate-x: -6px;
   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));
@@ -4176,6 +4254,11 @@ body {
   --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));
 }
+.scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  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));
+}
 .transform {
   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));
 }
@@ -4222,6 +4305,17 @@ body {
 .animate-skeleton {
   animation: waveLines 2s infinite ease-out;
 }
+@keyframes slideUp {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+.animate-slideUp {
+  animation: slideUp 0.4s ease;
+}
 .cursor-default {
   cursor: default;
 }
@@ -4231,6 +4325,9 @@ body {
 .cursor-pointer {
   cursor: pointer;
 }
+.touch-none {
+  touch-action: none;
+}
 .touch-pan-x {
   --tw-pan-x: pan-x;
   touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
@@ -4309,9 +4406,15 @@ body {
 .gap-1 {
   gap: 0.375rem;
 }
+.gap-1\.5 {
+  gap: 0.5625rem;
+}
 .gap-2 {
   gap: 0.75rem;
 }
+.gap-2\.5 {
+  gap: 0.9375rem;
+}
 .gap-3 {
   gap: 1.125rem;
 }
@@ -4429,6 +4532,10 @@ body {
   border-top-left-radius: 0.1875rem;
   border-bottom-left-radius: 0.1875rem;
 }
+.rounded-l-none {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
 .rounded-r {
   border-top-right-radius: 0.1875rem;
   border-bottom-right-radius: 0.1875rem;
@@ -4624,6 +4731,10 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(226 157 128 / var(--tw-border-opacity, 1));
 }
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
+}
 .border-x-border {
   --tw-border-opacity: 1;
   border-left-color: rgba(var(--colors-border), var(--tw-border-opacity, 1));
@@ -4656,6 +4767,10 @@ body {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
 }
+.border-l-borderDark {
+  --tw-border-opacity: 1;
+  border-left-color: rgba(var(--colors-borderDark), var(--tw-border-opacity, 1));
+}
 .border-l-hero {
   --tw-border-opacity: 1;
   border-left-color: rgba(var(--colors-hero), var(--tw-border-opacity, 1));
@@ -4741,6 +4856,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
 }
+.bg-black\/20 {
+  background-color: rgb(0 0 0 / 0.2);
+}
 .bg-black\/50 {
   background-color: rgb(0 0 0 / 0.5);
 }
@@ -5382,6 +5500,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--colors-primary-90), var(--tw-bg-opacity, 1));
 }
+.bg-primary\/5 {
+  background-color: rgba(var(--colors-primary), 0.05);
+}
 .bg-success {
   --tw-bg-opacity: 1;
   background-color: rgb(0 128 0 / var(--tw-bg-opacity, 1));
@@ -5562,6 +5683,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
+.\!bg-none {
+  background-image: none !important;
+}
 .bg-\[linear-gradient\(270deg\2c _\#fff_66\%\2c _transparent\)\] {
   background-image: linear-gradient(270deg, #fff 66%, transparent);
 }
@@ -5662,6 +5786,10 @@ body {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
 }
+.px-3\.5 {
+  padding-left: 1.3125rem;
+  padding-right: 1.3125rem;
+}
 .px-4 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -5686,6 +5814,10 @@ body {
   padding-left: 0.9375rem;
   padding-right: 0.9375rem;
 }
+.px-\[8\%\] {
+  padding-left: 8%;
+  padding-right: 8%;
+}
 .py-1 {
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
@@ -5743,6 +5875,9 @@ body {
 .pb-2 {
   padding-bottom: 0.75rem;
 }
+.pb-3 {
+  padding-bottom: 1.125rem;
+}
 .pb-4 {
   padding-bottom: 1.5rem;
 }
@@ -6116,6 +6251,9 @@ body {
 .leading-6 {
   line-height: 1.5rem;
 }
+.leading-9 {
+  line-height: 2.25rem;
+}
 .leading-\[1\.125rem\] {
   line-height: 1.125rem;
 }
@@ -6128,6 +6266,9 @@ body {
 .leading-\[1\.685rem\] {
   line-height: 1.685rem;
 }
+.leading-\[2\.125rem\] {
+  line-height: 2.125rem;
+}
 .leading-loose {
   line-height: 1.428571429;
 }
@@ -6247,6 +6388,9 @@ body {
 .underline {
   text-decoration-line: underline;
 }
+.line-through {
+  text-decoration-line: line-through;
+}
 .no-underline {
   text-decoration-line: none;
 }
@@ -8024,10 +8168,17 @@ body {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-light), var(--tw-bg-opacity, 1));
   }
+  .hover\:bg-primary:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-primary), var(--tw-bg-opacity, 1));
+  }
   .hover\:bg-primary-70:hover {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-primary-70), var(--tw-bg-opacity, 1));
   }
+  .hover\:bg-primary\/5:hover {
+    background-color: rgba(var(--colors-primary), 0.05);
+  }
   .hover\:bg-white:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -8060,6 +8211,9 @@ body {
   clip: auto;
   white-space: normal;
 }
+.focus\:pointer-events-auto:focus {
+  pointer-events: auto;
+}
 .focus\:fixed:focus {
   position: fixed;
 }
@@ -8070,6 +8224,9 @@ body {
 .focus\:top-0:focus {
   top: 0rem;
 }
+.focus\:touch-auto:focus {
+  touch-action: auto;
+}
 .focus\:\!border-borderDark:focus {
   --tw-border-opacity: 1 !important;
   border-color: rgba(var(--colors-borderDark), var(--tw-border-opacity, 1)) !important;
@@ -8114,6 +8271,9 @@ body {
 .focus\:underline:focus {
   text-decoration-line: underline;
 }
+.focus\:opacity-100:focus {
+  opacity: 1;
+}
 .focus\:\!shadow-none:focus {
   --tw-shadow: 0 0 #0000 !important;
   --tw-shadow-colored: 0 0 #0000 !important;
@@ -8411,9 +8571,6 @@ body {
   }
 }
 @media not all and (min-width: 992px) {
-  .max-md\:mb-7 {
-    margin-bottom: 2.625rem;
-  }
   .max-md\:mt-0\.5 {
     margin-top: 0.1875rem;
   }
@@ -8534,6 +8691,12 @@ body {
   .xsl\:pointer-events-auto {
     pointer-events: auto;
   }
+  .xsl\:visible {
+    visibility: visible;
+  }
+  .xsl\:\!fixed {
+    position: fixed !important;
+  }
   .xsl\:fixed {
     position: fixed;
   }
@@ -8550,6 +8713,15 @@ body {
     left: 0rem;
     right: 0rem;
   }
+  .xsl\:\!bottom-0 {
+    bottom: 0rem !important;
+  }
+  .xsl\:\!left-0 {
+    left: 0rem !important;
+  }
+  .xsl\:\!top-auto {
+    top: auto !important;
+  }
   .xsl\:bottom-full {
     bottom: 100%;
   }
@@ -8562,6 +8734,9 @@ body {
   .xsl\:left-\[0\.25rem\] {
     left: 0.25rem;
   }
+  .xsl\:right-0 {
+    right: 0rem;
+  }
   .xsl\:top-0 {
     top: 0rem;
   }
@@ -8673,6 +8848,18 @@ body {
   .xsl\:row-span-6 {
     grid-row: span 6 / span 6;
   }
+  .xsl\:-my-0\.5 {
+    margin-top: -0.1875rem;
+    margin-bottom: -0.1875rem;
+  }
+  .xsl\:-my-1\.5 {
+    margin-top: -0.5625rem;
+    margin-bottom: -0.5625rem;
+  }
+  .xsl\:mx-\[-8vw\] {
+    margin-left: -8vw;
+    margin-right: -8vw;
+  }
   .xsl\:my-1 {
     margin-top: 0.375rem;
     margin-bottom: 0.375rem;
@@ -8681,6 +8868,26 @@ body {
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
   }
+  .xsl\:my-\[-0\.3125rem\] {
+    margin-top: -0.3125rem;
+    margin-bottom: -0.3125rem;
+  }
+  .xsl\:my-\[-0\.5rem\] {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
+  .xsl\:-mr-1\.5 {
+    margin-right: -0.5625rem;
+  }
+  .xsl\:-mr-2 {
+    margin-right: -0.75rem;
+  }
+  .xsl\:-mr-2\.5 {
+    margin-right: -0.9375rem;
+  }
+  .xsl\:-mr-3 {
+    margin-right: -1.125rem;
+  }
   .xsl\:-mt-1 {
     margin-top: -0.375rem;
   }
@@ -8705,6 +8912,12 @@ body {
   .xsl\:mb-5 {
     margin-bottom: 1.875rem;
   }
+  .xsl\:mb-\[-0\.25rem\] {
+    margin-bottom: -0.25rem;
+  }
+  .xsl\:mb-\[-0\.625rem\] {
+    margin-bottom: -0.625rem;
+  }
   .xsl\:mb-\[-1px\] {
     margin-bottom: -1px;
   }
@@ -8729,6 +8942,9 @@ body {
   .xsl\:mr-\[0\.25rem\] {
     margin-right: 0.25rem;
   }
+  .xsl\:mt-1 {
+    margin-top: 0.375rem;
+  }
   .xsl\:mt-2 {
     margin-top: 0.75rem;
   }
@@ -8749,6 +8965,9 @@ body {
   .xsl\:inline-flex {
     display: inline-flex;
   }
+  .xsl\:hidden {
+    display: none;
+  }
   .xsl\:size-15 {
     width: 5.625rem;
     height: 5.625rem;
@@ -8837,6 +9056,18 @@ body {
   .xsl\:min-h-12 {
     min-height: 4.5rem;
   }
+  .xsl\:min-h-5 {
+    min-height: 1.875rem;
+  }
+  .xsl\:min-h-6 {
+    min-height: 2.25rem;
+  }
+  .xsl\:min-h-7 {
+    min-height: 2.625rem;
+  }
+  .xsl\:min-h-8 {
+    min-height: 3rem;
+  }
   .xsl\:min-h-9 {
     min-height: 3.375rem;
   }
@@ -8936,6 +9167,14 @@ body {
   .xsl\:flex-1 {
     flex: 1 1 0%;
   }
+  .xsl\:-translate-y-1\/2 {
+    --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\:translate-x-1\/2 {
+    --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\:translate-x-\[-6px\] {
     --tw-translate-x: -6px;
     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));
@@ -8968,12 +9207,42 @@ body {
     --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));
   }
+  .xsl\:scale-100 {
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    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));
+  }
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  .xsl\:animate-fadeIn {
+    animation: fadeIn 0.2s ease;
+  }
+  @keyframes slideUp {
+    0% {
+      transform: translateY(100%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+  .xsl\:animate-slideUp {
+    animation: slideUp 0.4s ease;
+  }
   .xsl\:cursor-not-allowed {
     cursor: not-allowed;
   }
   .xsl\:cursor-pointer {
     cursor: pointer;
   }
+  .xsl\:touch-none {
+    touch-action: none;
+  }
   .xsl\:list-decimal {
     list-style-type: decimal;
   }
@@ -9007,9 +9276,15 @@ body {
   .xsl\:justify-between {
     justify-content: space-between;
   }
+  .xsl\:gap-1\.5 {
+    gap: 0.5625rem;
+  }
   .xsl\:gap-2 {
     gap: 0.75rem;
   }
+  .xsl\:gap-2\.5 {
+    gap: 0.9375rem;
+  }
   .xsl\:gap-3 {
     gap: 1.125rem;
   }
@@ -9025,6 +9300,9 @@ body {
   .xsl\:self-center {
     align-self: center;
   }
+  .xsl\:overflow-auto {
+    overflow: auto;
+  }
   .xsl\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -9071,6 +9349,10 @@ body {
     border-top-right-radius: 0.1875rem;
     border-bottom-right-radius: 0.1875rem;
   }
+  .xsl\:rounded-t {
+    border-top-left-radius: 0.1875rem;
+    border-top-right-radius: 0.1875rem;
+  }
   .xsl\:border {
     border-width: 1px;
   }
@@ -9215,6 +9497,9 @@ body {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-background), var(--tw-bg-opacity, 1));
   }
+  .xsl\:bg-black\/20 {
+    background-color: rgb(0 0 0 / 0.2);
+  }
   .xsl\:bg-border {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-border), var(--tw-bg-opacity, 1));
@@ -9296,6 +9581,10 @@ body {
     padding-left: 0rem;
     padding-right: 0rem;
   }
+  .xsl\:px-0\.5 {
+    padding-left: 0.1875rem;
+    padding-right: 0.1875rem;
+  }
   .xsl\:px-1 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
@@ -9320,6 +9609,10 @@ body {
     padding-left: 1.125rem;
     padding-right: 1.125rem;
   }
+  .xsl\:px-3\.5 {
+    padding-left: 1.3125rem;
+    padding-right: 1.3125rem;
+  }
   .xsl\:px-4 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -9336,14 +9629,26 @@ body {
     padding-left: 0.4375rem;
     padding-right: 0.4375rem;
   }
+  .xsl\:px-\[8\%\] {
+    padding-left: 8%;
+    padding-right: 8%;
+  }
   .xsl\:py-1\.5 {
     padding-top: 0.5625rem;
     padding-bottom: 0.5625rem;
   }
+  .xsl\:py-2 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
   .xsl\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
   }
+  .xsl\:py-\[0\.25rem\] {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
   .xsl\:py-\[0\.3125rem\] {
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;
@@ -9361,6 +9666,9 @@ body {
   .xsl\:pb-12 {
     padding-bottom: 4.5rem;
   }
+  .xsl\:pb-3 {
+    padding-bottom: 1.125rem;
+  }
   .xsl\:pb-5 {
     padding-bottom: 1.875rem;
   }
@@ -9535,6 +9843,10 @@ body {
     --tw-text-opacity: 1;
     color: rgba(var(--colors-text-10), var(--tw-text-opacity, 1));
   }
+  .xsl\:text-text-50 {
+    --tw-text-opacity: 1;
+    color: rgba(var(--colors-text-50), var(--tw-text-opacity, 1));
+  }
   .xsl\:text-warning {
     --tw-text-opacity: 1;
     color: rgb(197 59 0 / var(--tw-text-opacity, 1));
@@ -9546,6 +9858,12 @@ body {
   .xsl\:underline {
     text-decoration-line: underline;
   }
+  .xsl\:opacity-0 {
+    opacity: 0;
+  }
+  .xsl\:opacity-100 {
+    opacity: 1;
+  }
   .xsl\:opacity-50 {
     opacity: 0.5;
   }
@@ -9554,6 +9872,11 @@ body {
     --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
+  .xsl\:shadow-\[0_5px_10px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
+    --tw-shadow: 0 5px 10px rgba(0,0,0,0.2);
+    --tw-shadow-colored: 0 5px 10px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
   .xsl\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
     --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
     --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
@@ -9837,6 +10160,15 @@ body {
       background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
     }
   }
+  .xsl\:focus\:pointer-events-auto:focus {
+    pointer-events: auto;
+  }
+  .xsl\:focus\:touch-auto:focus {
+    touch-action: auto;
+  }
+  .xsl\:focus\:opacity-100:focus {
+    opacity: 1;
+  }
   .xsl\:active\:bg-hero-50:active {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-hero-50), var(--tw-bg-opacity, 1));
@@ -9966,9 +10298,6 @@ body {
     background-color: rgba(var(--colors-pop), var(--tw-bg-opacity, 1));
   }
   @media not all and (min-width: 992px) {
-    .xsl\:max-md\:mb-7 {
-      margin-bottom: 2.625rem;
-    }
     .xsl\:max-md\:flex-col {
       flex-direction: column;
     }
@@ -10049,6 +10378,12 @@ body {
   .sm\:pointer-events-auto {
     pointer-events: auto;
   }
+  .sm\:visible {
+    visibility: visible;
+  }
+  .sm\:\!fixed {
+    position: fixed !important;
+  }
   .sm\:fixed {
     position: fixed;
   }
@@ -10070,6 +10405,15 @@ body {
     left: 0rem;
     right: 0rem;
   }
+  .sm\:\!bottom-0 {
+    bottom: 0rem !important;
+  }
+  .sm\:\!left-0 {
+    left: 0rem !important;
+  }
+  .sm\:\!top-auto {
+    top: auto !important;
+  }
   .sm\:bottom-full {
     bottom: 100%;
   }
@@ -10082,6 +10426,9 @@ body {
   .sm\:left-\[0\.25rem\] {
     left: 0.25rem;
   }
+  .sm\:right-0 {
+    right: 0rem;
+  }
   .sm\:top-0 {
     top: 0rem;
   }
@@ -10190,6 +10537,18 @@ body {
   .sm\:row-span-6 {
     grid-row: span 6 / span 6;
   }
+  .sm\:-my-0\.5 {
+    margin-top: -0.1875rem;
+    margin-bottom: -0.1875rem;
+  }
+  .sm\:-my-1\.5 {
+    margin-top: -0.5625rem;
+    margin-bottom: -0.5625rem;
+  }
+  .sm\:mx-\[-8vw\] {
+    margin-left: -8vw;
+    margin-right: -8vw;
+  }
   .sm\:my-1 {
     margin-top: 0.375rem;
     margin-bottom: 0.375rem;
@@ -10198,9 +10557,29 @@ body {
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
   }
+  .sm\:my-\[-0\.3125rem\] {
+    margin-top: -0.3125rem;
+    margin-bottom: -0.3125rem;
+  }
+  .sm\:my-\[-0\.5rem\] {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
   .sm\:-ml-4 {
     margin-left: -1.5rem;
   }
+  .sm\:-mr-1\.5 {
+    margin-right: -0.5625rem;
+  }
+  .sm\:-mr-2 {
+    margin-right: -0.75rem;
+  }
+  .sm\:-mr-2\.5 {
+    margin-right: -0.9375rem;
+  }
+  .sm\:-mr-3 {
+    margin-right: -1.125rem;
+  }
   .sm\:-mt-1 {
     margin-top: -0.375rem;
   }
@@ -10228,6 +10607,12 @@ body {
   .sm\:mb-5 {
     margin-bottom: 1.875rem;
   }
+  .sm\:mb-\[-0\.25rem\] {
+    margin-bottom: -0.25rem;
+  }
+  .sm\:mb-\[-0\.625rem\] {
+    margin-bottom: -0.625rem;
+  }
   .sm\:mb-\[-1px\] {
     margin-bottom: -1px;
   }
@@ -10252,6 +10637,9 @@ body {
   .sm\:mr-\[0\.25rem\] {
     margin-right: 0.25rem;
   }
+  .sm\:mt-1 {
+    margin-top: 0.375rem;
+  }
   .sm\:mt-2 {
     margin-top: 0.75rem;
   }
@@ -10377,6 +10765,18 @@ body {
   .sm\:min-h-12 {
     min-height: 4.5rem;
   }
+  .sm\:min-h-5 {
+    min-height: 1.875rem;
+  }
+  .sm\:min-h-6 {
+    min-height: 2.25rem;
+  }
+  .sm\:min-h-7 {
+    min-height: 2.625rem;
+  }
+  .sm\:min-h-8 {
+    min-height: 3rem;
+  }
   .sm\:min-h-9 {
     min-height: 3.375rem;
   }
@@ -10479,6 +10879,14 @@ body {
   .sm\:flex-1 {
     flex: 1 1 0%;
   }
+  .sm\:-translate-y-1\/2 {
+    --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\:translate-x-1\/2 {
+    --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\:translate-x-\[-6px\] {
     --tw-translate-x: -6px;
     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));
@@ -10511,12 +10919,42 @@ body {
     --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));
   }
+  .sm\:scale-100 {
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    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));
+  }
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  .sm\:animate-fadeIn {
+    animation: fadeIn 0.2s ease;
+  }
+  @keyframes slideUp {
+    0% {
+      transform: translateY(100%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+  .sm\:animate-slideUp {
+    animation: slideUp 0.4s ease;
+  }
   .sm\:cursor-not-allowed {
     cursor: not-allowed;
   }
   .sm\:cursor-pointer {
     cursor: pointer;
   }
+  .sm\:touch-none {
+    touch-action: none;
+  }
   .sm\:list-decimal {
     list-style-type: decimal;
   }
@@ -10550,9 +10988,15 @@ body {
   .sm\:justify-between {
     justify-content: space-between;
   }
+  .sm\:gap-1\.5 {
+    gap: 0.5625rem;
+  }
   .sm\:gap-2 {
     gap: 0.75rem;
   }
+  .sm\:gap-2\.5 {
+    gap: 0.9375rem;
+  }
   .sm\:gap-3 {
     gap: 1.125rem;
   }
@@ -10568,6 +11012,9 @@ body {
   .sm\:self-center {
     align-self: center;
   }
+  .sm\:overflow-auto {
+    overflow: auto;
+  }
   .sm\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -10614,6 +11061,10 @@ body {
     border-top-right-radius: 0.1875rem;
     border-bottom-right-radius: 0.1875rem;
   }
+  .sm\:rounded-t {
+    border-top-left-radius: 0.1875rem;
+    border-top-right-radius: 0.1875rem;
+  }
   .sm\:border {
     border-width: 1px;
   }
@@ -10758,6 +11209,9 @@ body {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-background), var(--tw-bg-opacity, 1));
   }
+  .sm\:bg-black\/20 {
+    background-color: rgb(0 0 0 / 0.2);
+  }
   .sm\:bg-border {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-border), var(--tw-bg-opacity, 1));
@@ -10842,6 +11296,10 @@ body {
     padding-left: 0rem;
     padding-right: 0rem;
   }
+  .sm\:px-0\.5 {
+    padding-left: 0.1875rem;
+    padding-right: 0.1875rem;
+  }
   .sm\:px-1 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
@@ -10866,6 +11324,10 @@ body {
     padding-left: 1.125rem;
     padding-right: 1.125rem;
   }
+  .sm\:px-3\.5 {
+    padding-left: 1.3125rem;
+    padding-right: 1.3125rem;
+  }
   .sm\:px-4 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -10890,14 +11352,26 @@ body {
     padding-left: 0.4375rem;
     padding-right: 0.4375rem;
   }
+  .sm\:px-\[8\%\] {
+    padding-left: 8%;
+    padding-right: 8%;
+  }
   .sm\:py-1\.5 {
     padding-top: 0.5625rem;
     padding-bottom: 0.5625rem;
   }
+  .sm\:py-2 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
   .sm\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
   }
+  .sm\:py-\[0\.25rem\] {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
   .sm\:py-\[0\.3125rem\] {
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;
@@ -10919,6 +11393,9 @@ body {
   .sm\:pb-12 {
     padding-bottom: 4.5rem;
   }
+  .sm\:pb-3 {
+    padding-bottom: 1.125rem;
+  }
   .sm\:pb-5 {
     padding-bottom: 1.875rem;
   }
@@ -11101,6 +11578,10 @@ body {
     --tw-text-opacity: 1;
     color: rgba(var(--colors-text-10), var(--tw-text-opacity, 1));
   }
+  .sm\:text-text-50 {
+    --tw-text-opacity: 1;
+    color: rgba(var(--colors-text-50), var(--tw-text-opacity, 1));
+  }
   .sm\:text-warning {
     --tw-text-opacity: 1;
     color: rgb(197 59 0 / var(--tw-text-opacity, 1));
@@ -11112,6 +11593,12 @@ body {
   .sm\:underline {
     text-decoration-line: underline;
   }
+  .sm\:opacity-0 {
+    opacity: 0;
+  }
+  .sm\:opacity-100 {
+    opacity: 1;
+  }
   .sm\:opacity-50 {
     opacity: 0.5;
   }
@@ -11120,6 +11607,11 @@ body {
     --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
+  .sm\:shadow-\[0_5px_10px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
+    --tw-shadow: 0 5px 10px rgba(0,0,0,0.2);
+    --tw-shadow-colored: 0 5px 10px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
   .sm\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
     --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
     --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
@@ -11403,6 +11895,15 @@ body {
       background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
     }
   }
+  .sm\:focus\:pointer-events-auto:focus {
+    pointer-events: auto;
+  }
+  .sm\:focus\:touch-auto:focus {
+    touch-action: auto;
+  }
+  .sm\:focus\:opacity-100:focus {
+    opacity: 1;
+  }
   .sm\:active\:bg-hero-50:active {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-hero-50), var(--tw-bg-opacity, 1));
@@ -11550,9 +12051,6 @@ body {
     background-color: rgba(var(--colors-pop), var(--tw-bg-opacity, 1));
   }
   @media not all and (min-width: 992px) {
-    .sm\:max-md\:mb-7 {
-      margin-bottom: 2.625rem;
-    }
     .sm\:max-md\:flex-col {
       flex-direction: column;
     }
@@ -11604,9 +12102,6 @@ body {
     .xsl\:md\:ml-6 {
       margin-left: 2.25rem;
     }
-    .xsl\:md\:mb-4 {
-      margin-bottom: 1.5rem;
-    }
     .xsl\:md\:max-w-container-md {
       max-width: 72.75rem;
     }
@@ -11633,9 +12128,6 @@ body {
     .sm\:md\:ml-6 {
       margin-left: 2.25rem;
     }
-    .sm\:md\:mb-4 {
-      margin-bottom: 1.5rem;
-    }
     .sm\:md\:max-w-container-md {
       max-width: 72.75rem;
     }
@@ -11691,6 +12183,12 @@ body {
   .md\:pointer-events-auto {
     pointer-events: auto;
   }
+  .md\:visible {
+    visibility: visible;
+  }
+  .md\:\!fixed {
+    position: fixed !important;
+  }
   .md\:fixed {
     position: fixed;
   }
@@ -11707,6 +12205,15 @@ body {
     left: 0rem;
     right: 0rem;
   }
+  .md\:\!bottom-0 {
+    bottom: 0rem !important;
+  }
+  .md\:\!left-0 {
+    left: 0rem !important;
+  }
+  .md\:\!top-auto {
+    top: auto !important;
+  }
   .md\:bottom-full {
     bottom: 100%;
   }
@@ -11719,6 +12226,9 @@ body {
   .md\:left-\[0\.25rem\] {
     left: 0.25rem;
   }
+  .md\:right-0 {
+    right: 0rem;
+  }
   .md\:top-0 {
     top: 0rem;
   }
@@ -11831,10 +12341,22 @@ body {
     margin-left: -1.125rem;
     margin-right: -1.125rem;
   }
+  .md\:-my-0\.5 {
+    margin-top: -0.1875rem;
+    margin-bottom: -0.1875rem;
+  }
+  .md\:-my-1\.5 {
+    margin-top: -0.5625rem;
+    margin-bottom: -0.5625rem;
+  }
   .md\:-my-3 {
     margin-top: -1.125rem;
     margin-bottom: -1.125rem;
   }
+  .md\:mx-\[-8vw\] {
+    margin-left: -8vw;
+    margin-right: -8vw;
+  }
   .md\:my-1 {
     margin-top: 0.375rem;
     margin-bottom: 0.375rem;
@@ -11843,9 +12365,29 @@ body {
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
   }
+  .md\:my-\[-0\.3125rem\] {
+    margin-top: -0.3125rem;
+    margin-bottom: -0.3125rem;
+  }
+  .md\:my-\[-0\.5rem\] {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
   .md\:-ml-3 {
     margin-left: -1.125rem;
   }
+  .md\:-mr-1\.5 {
+    margin-right: -0.5625rem;
+  }
+  .md\:-mr-2 {
+    margin-right: -0.75rem;
+  }
+  .md\:-mr-2\.5 {
+    margin-right: -0.9375rem;
+  }
+  .md\:-mr-3 {
+    margin-right: -1.125rem;
+  }
   .md\:-mt-1 {
     margin-top: -0.375rem;
   }
@@ -11873,13 +12415,16 @@ body {
   .md\:mb-5 {
     margin-bottom: 1.875rem;
   }
+  .md\:mb-\[-0\.25rem\] {
+    margin-bottom: -0.25rem;
+  }
+  .md\:mb-\[-0\.625rem\] {
+    margin-bottom: -0.625rem;
+  }
   .md\:mb-\[-1px\] {
     margin-bottom: -1px;
   }
   @media (min-width: 992px) {
-    .md\:md\:mb-4 {
-      margin-bottom: 1.5rem;
-    }
     .md\:md\:ml-6 {
       margin-left: 2.25rem;
     }
@@ -12017,6 +12562,18 @@ body {
   .md\:min-h-12 {
     min-height: 4.5rem;
   }
+  .md\:min-h-5 {
+    min-height: 1.875rem;
+  }
+  .md\:min-h-6 {
+    min-height: 2.25rem;
+  }
+  .md\:min-h-7 {
+    min-height: 2.625rem;
+  }
+  .md\:min-h-8 {
+    min-height: 3rem;
+  }
   .md\:min-h-9 {
     min-height: 3.375rem;
   }
@@ -12116,6 +12673,14 @@ body {
   .md\:flex-1 {
     flex: 1 1 0%;
   }
+  .md\:-translate-y-1\/2 {
+    --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\:translate-x-1\/2 {
+    --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\:translate-x-\[-6px\] {
     --tw-translate-x: -6px;
     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));
@@ -12148,12 +12713,42 @@ body {
     --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));
   }
+  .md\:scale-100 {
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    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));
+  }
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  .md\:animate-fadeIn {
+    animation: fadeIn 0.2s ease;
+  }
+  @keyframes slideUp {
+    0% {
+      transform: translateY(100%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+  .md\:animate-slideUp {
+    animation: slideUp 0.4s ease;
+  }
   .md\:cursor-not-allowed {
     cursor: not-allowed;
   }
   .md\:cursor-pointer {
     cursor: pointer;
   }
+  .md\:touch-none {
+    touch-action: none;
+  }
   .md\:list-decimal {
     list-style-type: decimal;
   }
@@ -12187,9 +12782,15 @@ body {
   .md\:justify-between {
     justify-content: space-between;
   }
+  .md\:gap-1\.5 {
+    gap: 0.5625rem;
+  }
   .md\:gap-2 {
     gap: 0.75rem;
   }
+  .md\:gap-2\.5 {
+    gap: 0.9375rem;
+  }
   .md\:gap-3 {
     gap: 1.125rem;
   }
@@ -12205,6 +12806,9 @@ body {
   .md\:self-center {
     align-self: center;
   }
+  .md\:overflow-auto {
+    overflow: auto;
+  }
   .md\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -12254,6 +12858,10 @@ body {
     border-top-right-radius: 0.1875rem;
     border-bottom-right-radius: 0.1875rem;
   }
+  .md\:rounded-t {
+    border-top-left-radius: 0.1875rem;
+    border-top-right-radius: 0.1875rem;
+  }
   .md\:border {
     border-width: 1px;
   }
@@ -12398,6 +13006,9 @@ body {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-background), var(--tw-bg-opacity, 1));
   }
+  .md\:bg-black\/20 {
+    background-color: rgb(0 0 0 / 0.2);
+  }
   .md\:bg-border {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-border), var(--tw-bg-opacity, 1));
@@ -12497,6 +13108,10 @@ body {
     padding-left: 0rem;
     padding-right: 0rem;
   }
+  .md\:px-0\.5 {
+    padding-left: 0.1875rem;
+    padding-right: 0.1875rem;
+  }
   .md\:px-1 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
@@ -12521,6 +13136,10 @@ body {
     padding-left: 1.125rem;
     padding-right: 1.125rem;
   }
+  .md\:px-3\.5 {
+    padding-left: 1.3125rem;
+    padding-right: 1.3125rem;
+  }
   .md\:px-4 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -12553,14 +13172,26 @@ body {
     padding-left: 2.875rem;
     padding-right: 2.875rem;
   }
+  .md\:px-\[8\%\] {
+    padding-left: 8%;
+    padding-right: 8%;
+  }
   .md\:py-1\.5 {
     padding-top: 0.5625rem;
     padding-bottom: 0.5625rem;
   }
+  .md\:py-2 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
   .md\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
   }
+  .md\:py-\[0\.25rem\] {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
   .md\:py-\[0\.3125rem\] {
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;
@@ -12572,8 +13203,8 @@ body {
   .md\:pb-12 {
     padding-bottom: 4.5rem;
   }
-  .md\:pb-4 {
-    padding-bottom: 1.5rem;
+  .md\:pb-3 {
+    padding-bottom: 1.125rem;
   }
   .md\:pb-5 {
     padding-bottom: 1.875rem;
@@ -12749,6 +13380,10 @@ body {
     --tw-text-opacity: 1;
     color: rgba(var(--colors-text-10), var(--tw-text-opacity, 1));
   }
+  .md\:text-text-50 {
+    --tw-text-opacity: 1;
+    color: rgba(var(--colors-text-50), var(--tw-text-opacity, 1));
+  }
   .md\:text-warning {
     --tw-text-opacity: 1;
     color: rgb(197 59 0 / var(--tw-text-opacity, 1));
@@ -12760,6 +13395,12 @@ body {
   .md\:underline {
     text-decoration-line: underline;
   }
+  .md\:opacity-0 {
+    opacity: 0;
+  }
+  .md\:opacity-100 {
+    opacity: 1;
+  }
   .md\:opacity-50 {
     opacity: 0.5;
   }
@@ -12768,6 +13409,11 @@ body {
     --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
+  .md\:shadow-\[0_5px_10px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
+    --tw-shadow: 0 5px 10px rgba(0,0,0,0.2);
+    --tw-shadow-colored: 0 5px 10px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
   .md\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
     --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
     --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
@@ -13051,6 +13697,15 @@ body {
       background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
     }
   }
+  .md\:focus\:pointer-events-auto:focus {
+    pointer-events: auto;
+  }
+  .md\:focus\:touch-auto:focus {
+    touch-action: auto;
+  }
+  .md\:focus\:opacity-100:focus {
+    opacity: 1;
+  }
   .md\:active\:bg-hero-50:active {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-hero-50), var(--tw-bg-opacity, 1));
@@ -13180,9 +13835,6 @@ body {
     background-color: rgba(var(--colors-pop), var(--tw-bg-opacity, 1));
   }
   @media not all and (min-width: 992px) {
-    .md\:max-md\:mb-7 {
-      margin-bottom: 2.625rem;
-    }
     .md\:max-md\:flex-col {
       flex-direction: column;
     }
@@ -13272,9 +13924,6 @@ body {
     .lg\:md\:max-w-container-md {
       max-width: 72.75rem;
     }
-    .lg\:md\:mb-4 {
-      margin-bottom: 1.5rem;
-    }
     .lg\:md\:ml-6 {
       margin-left: 2.25rem;
     }
@@ -13344,6 +13993,12 @@ body {
   .lg\:pointer-events-auto {
     pointer-events: auto;
   }
+  .lg\:visible {
+    visibility: visible;
+  }
+  .lg\:\!fixed {
+    position: fixed !important;
+  }
   .lg\:fixed {
     position: fixed;
   }
@@ -13360,6 +14015,15 @@ body {
     left: 0rem;
     right: 0rem;
   }
+  .lg\:\!bottom-0 {
+    bottom: 0rem !important;
+  }
+  .lg\:\!left-0 {
+    left: 0rem !important;
+  }
+  .lg\:\!top-auto {
+    top: auto !important;
+  }
   .lg\:bottom-full {
     bottom: 100%;
   }
@@ -13372,6 +14036,9 @@ body {
   .lg\:left-\[0\.25rem\] {
     left: 0.25rem;
   }
+  .lg\:right-0 {
+    right: 0rem;
+  }
   .lg\:top-0 {
     top: 0rem;
   }
@@ -13480,6 +14147,18 @@ body {
   .lg\:row-span-6 {
     grid-row: span 6 / span 6;
   }
+  .lg\:-my-0\.5 {
+    margin-top: -0.1875rem;
+    margin-bottom: -0.1875rem;
+  }
+  .lg\:-my-1\.5 {
+    margin-top: -0.5625rem;
+    margin-bottom: -0.5625rem;
+  }
+  .lg\:mx-\[-8vw\] {
+    margin-left: -8vw;
+    margin-right: -8vw;
+  }
   .lg\:my-1 {
     margin-top: 0.375rem;
     margin-bottom: 0.375rem;
@@ -13488,6 +14167,26 @@ body {
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
   }
+  .lg\:my-\[-0\.3125rem\] {
+    margin-top: -0.3125rem;
+    margin-bottom: -0.3125rem;
+  }
+  .lg\:my-\[-0\.5rem\] {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
+  .lg\:-mr-1\.5 {
+    margin-right: -0.5625rem;
+  }
+  .lg\:-mr-2 {
+    margin-right: -0.75rem;
+  }
+  .lg\:-mr-2\.5 {
+    margin-right: -0.9375rem;
+  }
+  .lg\:-mr-3 {
+    margin-right: -1.125rem;
+  }
   .lg\:-mt-1 {
     margin-top: -0.375rem;
   }
@@ -13517,6 +14216,12 @@ body {
   .lg\:mb-5 {
     margin-bottom: 1.875rem;
   }
+  .lg\:mb-\[-0\.25rem\] {
+    margin-bottom: -0.25rem;
+  }
+  .lg\:mb-\[-0\.625rem\] {
+    margin-bottom: -0.625rem;
+  }
   .lg\:mb-\[-1px\] {
     margin-bottom: -1px;
   }
@@ -13544,6 +14249,9 @@ body {
   .lg\:mr-\[300px\] {
     margin-right: 300px;
   }
+  .lg\:mt-1 {
+    margin-top: 0.375rem;
+  }
   .lg\:mt-2 {
     margin-top: 0.75rem;
   }
@@ -13559,6 +14267,9 @@ body {
   .lg\:inline-flex {
     display: inline-flex;
   }
+  .lg\:hidden {
+    display: none;
+  }
   .lg\:size-15 {
     width: 5.625rem;
     height: 5.625rem;
@@ -13647,6 +14358,18 @@ body {
   .lg\:min-h-12 {
     min-height: 4.5rem;
   }
+  .lg\:min-h-5 {
+    min-height: 1.875rem;
+  }
+  .lg\:min-h-6 {
+    min-height: 2.25rem;
+  }
+  .lg\:min-h-7 {
+    min-height: 2.625rem;
+  }
+  .lg\:min-h-8 {
+    min-height: 3rem;
+  }
   .lg\:min-h-9 {
     min-height: 3.375rem;
   }
@@ -13746,6 +14469,14 @@ body {
   .lg\:flex-1 {
     flex: 1 1 0%;
   }
+  .lg\:-translate-y-1\/2 {
+    --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\:translate-x-1\/2 {
+    --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\:translate-x-\[-6px\] {
     --tw-translate-x: -6px;
     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));
@@ -13778,12 +14509,42 @@ body {
     --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));
   }
+  .lg\:scale-100 {
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    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));
+  }
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  .lg\:animate-fadeIn {
+    animation: fadeIn 0.2s ease;
+  }
+  @keyframes slideUp {
+    0% {
+      transform: translateY(100%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+  .lg\:animate-slideUp {
+    animation: slideUp 0.4s ease;
+  }
   .lg\:cursor-not-allowed {
     cursor: not-allowed;
   }
   .lg\:cursor-pointer {
     cursor: pointer;
   }
+  .lg\:touch-none {
+    touch-action: none;
+  }
   .lg\:list-decimal {
     list-style-type: decimal;
   }
@@ -13817,9 +14578,15 @@ body {
   .lg\:justify-between {
     justify-content: space-between;
   }
+  .lg\:gap-1\.5 {
+    gap: 0.5625rem;
+  }
   .lg\:gap-2 {
     gap: 0.75rem;
   }
+  .lg\:gap-2\.5 {
+    gap: 0.9375rem;
+  }
   .lg\:gap-3 {
     gap: 1.125rem;
   }
@@ -13835,6 +14602,9 @@ body {
   .lg\:self-center {
     align-self: center;
   }
+  .lg\:overflow-auto {
+    overflow: auto;
+  }
   .lg\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -13881,6 +14651,10 @@ body {
     border-top-right-radius: 0.1875rem;
     border-bottom-right-radius: 0.1875rem;
   }
+  .lg\:rounded-t {
+    border-top-left-radius: 0.1875rem;
+    border-top-right-radius: 0.1875rem;
+  }
   .lg\:border {
     border-width: 1px;
   }
@@ -14025,6 +14799,9 @@ body {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-background), var(--tw-bg-opacity, 1));
   }
+  .lg\:bg-black\/20 {
+    background-color: rgb(0 0 0 / 0.2);
+  }
   .lg\:bg-border {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-border), var(--tw-bg-opacity, 1));
@@ -14116,6 +14893,10 @@ body {
     padding-left: 0rem;
     padding-right: 0rem;
   }
+  .lg\:px-0\.5 {
+    padding-left: 0.1875rem;
+    padding-right: 0.1875rem;
+  }
   .lg\:px-1 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
@@ -14144,6 +14925,10 @@ body {
     padding-left: 1.125rem;
     padding-right: 1.125rem;
   }
+  .lg\:px-3\.5 {
+    padding-left: 1.3125rem;
+    padding-right: 1.3125rem;
+  }
   .lg\:px-4 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -14164,14 +14949,26 @@ body {
     padding-left: 3.125rem;
     padding-right: 3.125rem;
   }
+  .lg\:px-\[8\%\] {
+    padding-left: 8%;
+    padding-right: 8%;
+  }
   .lg\:py-1\.5 {
     padding-top: 0.5625rem;
     padding-bottom: 0.5625rem;
   }
+  .lg\:py-2 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
   .lg\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
   }
+  .lg\:py-\[0\.25rem\] {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
   .lg\:py-\[0\.3125rem\] {
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;
@@ -14183,6 +14980,9 @@ body {
   .lg\:pb-12 {
     padding-bottom: 4.5rem;
   }
+  .lg\:pb-3 {
+    padding-bottom: 1.125rem;
+  }
   .lg\:pb-5 {
     padding-bottom: 1.875rem;
   }
@@ -14357,6 +15157,10 @@ body {
     --tw-text-opacity: 1;
     color: rgba(var(--colors-text-10), var(--tw-text-opacity, 1));
   }
+  .lg\:text-text-50 {
+    --tw-text-opacity: 1;
+    color: rgba(var(--colors-text-50), var(--tw-text-opacity, 1));
+  }
   .lg\:text-warning {
     --tw-text-opacity: 1;
     color: rgb(197 59 0 / var(--tw-text-opacity, 1));
@@ -14368,6 +15172,12 @@ body {
   .lg\:underline {
     text-decoration-line: underline;
   }
+  .lg\:opacity-0 {
+    opacity: 0;
+  }
+  .lg\:opacity-100 {
+    opacity: 1;
+  }
   .lg\:opacity-50 {
     opacity: 0.5;
   }
@@ -14376,6 +15186,11 @@ body {
     --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
+  .lg\:shadow-\[0_5px_10px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
+    --tw-shadow: 0 5px 10px rgba(0,0,0,0.2);
+    --tw-shadow-colored: 0 5px 10px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
   .lg\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
     --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
     --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
@@ -14659,6 +15474,15 @@ body {
       background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
     }
   }
+  .lg\:focus\:pointer-events-auto:focus {
+    pointer-events: auto;
+  }
+  .lg\:focus\:touch-auto:focus {
+    touch-action: auto;
+  }
+  .lg\:focus\:opacity-100:focus {
+    opacity: 1;
+  }
   .lg\:active\:bg-hero-50:active {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-hero-50), var(--tw-bg-opacity, 1));
@@ -14788,9 +15612,6 @@ body {
     background-color: rgba(var(--colors-pop), var(--tw-bg-opacity, 1));
   }
   @media not all and (min-width: 992px) {
-    .lg\:max-md\:mb-7 {
-      margin-bottom: 2.625rem;
-    }
     .lg\:max-md\:flex-col {
       flex-direction: column;
     }
@@ -14842,9 +15663,6 @@ body {
     .xl\:md\:max-w-container-md {
       max-width: 72.75rem;
     }
-    .xl\:md\:mb-4 {
-      margin-bottom: 1.5rem;
-    }
     .xl\:md\:ml-6 {
       margin-left: 2.25rem;
     }
@@ -14914,6 +15732,12 @@ body {
   .xl\:pointer-events-auto {
     pointer-events: auto;
   }
+  .xl\:visible {
+    visibility: visible;
+  }
+  .xl\:\!fixed {
+    position: fixed !important;
+  }
   .xl\:fixed {
     position: fixed;
   }
@@ -14930,6 +15754,15 @@ body {
     left: 0rem;
     right: 0rem;
   }
+  .xl\:\!bottom-0 {
+    bottom: 0rem !important;
+  }
+  .xl\:\!left-0 {
+    left: 0rem !important;
+  }
+  .xl\:\!top-auto {
+    top: auto !important;
+  }
   .xl\:bottom-full {
     bottom: 100%;
   }
@@ -14942,6 +15775,9 @@ body {
   .xl\:left-\[0\.25rem\] {
     left: 0.25rem;
   }
+  .xl\:right-0 {
+    right: 0rem;
+  }
   .xl\:top-0 {
     top: 0rem;
   }
@@ -15050,6 +15886,18 @@ body {
   .xl\:row-span-6 {
     grid-row: span 6 / span 6;
   }
+  .xl\:-my-0\.5 {
+    margin-top: -0.1875rem;
+    margin-bottom: -0.1875rem;
+  }
+  .xl\:-my-1\.5 {
+    margin-top: -0.5625rem;
+    margin-bottom: -0.5625rem;
+  }
+  .xl\:mx-\[-8vw\] {
+    margin-left: -8vw;
+    margin-right: -8vw;
+  }
   .xl\:my-1 {
     margin-top: 0.375rem;
     margin-bottom: 0.375rem;
@@ -15058,6 +15906,26 @@ body {
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
   }
+  .xl\:my-\[-0\.3125rem\] {
+    margin-top: -0.3125rem;
+    margin-bottom: -0.3125rem;
+  }
+  .xl\:my-\[-0\.5rem\] {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
+  .xl\:-mr-1\.5 {
+    margin-right: -0.5625rem;
+  }
+  .xl\:-mr-2 {
+    margin-right: -0.75rem;
+  }
+  .xl\:-mr-2\.5 {
+    margin-right: -0.9375rem;
+  }
+  .xl\:-mr-3 {
+    margin-right: -1.125rem;
+  }
   .xl\:-mt-1 {
     margin-top: -0.375rem;
   }
@@ -15082,6 +15950,12 @@ body {
   .xl\:mb-5 {
     margin-bottom: 1.875rem;
   }
+  .xl\:mb-\[-0\.25rem\] {
+    margin-bottom: -0.25rem;
+  }
+  .xl\:mb-\[-0\.625rem\] {
+    margin-bottom: -0.625rem;
+  }
   .xl\:mb-\[-1px\] {
     margin-bottom: -1px;
   }
@@ -15106,6 +15980,9 @@ body {
   .xl\:mr-\[0\.25rem\] {
     margin-right: 0.25rem;
   }
+  .xl\:mt-1 {
+    margin-top: 0.375rem;
+  }
   .xl\:mt-2 {
     margin-top: 0.75rem;
   }
@@ -15121,6 +15998,9 @@ body {
   .xl\:inline-flex {
     display: inline-flex;
   }
+  .xl\:hidden {
+    display: none;
+  }
   .xl\:size-15 {
     width: 5.625rem;
     height: 5.625rem;
@@ -15209,6 +16089,18 @@ body {
   .xl\:min-h-12 {
     min-height: 4.5rem;
   }
+  .xl\:min-h-5 {
+    min-height: 1.875rem;
+  }
+  .xl\:min-h-6 {
+    min-height: 2.25rem;
+  }
+  .xl\:min-h-7 {
+    min-height: 2.625rem;
+  }
+  .xl\:min-h-8 {
+    min-height: 3rem;
+  }
   .xl\:min-h-9 {
     min-height: 3.375rem;
   }
@@ -15300,6 +16192,14 @@ body {
   .xl\:flex-1 {
     flex: 1 1 0%;
   }
+  .xl\:-translate-y-1\/2 {
+    --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\:translate-x-1\/2 {
+    --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\:translate-x-\[-6px\] {
     --tw-translate-x: -6px;
     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));
@@ -15332,12 +16232,42 @@ body {
     --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));
   }
+  .xl\:scale-100 {
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    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));
+  }
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  .xl\:animate-fadeIn {
+    animation: fadeIn 0.2s ease;
+  }
+  @keyframes slideUp {
+    0% {
+      transform: translateY(100%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+  .xl\:animate-slideUp {
+    animation: slideUp 0.4s ease;
+  }
   .xl\:cursor-not-allowed {
     cursor: not-allowed;
   }
   .xl\:cursor-pointer {
     cursor: pointer;
   }
+  .xl\:touch-none {
+    touch-action: none;
+  }
   .xl\:list-decimal {
     list-style-type: decimal;
   }
@@ -15371,9 +16301,15 @@ body {
   .xl\:justify-between {
     justify-content: space-between;
   }
+  .xl\:gap-1\.5 {
+    gap: 0.5625rem;
+  }
   .xl\:gap-2 {
     gap: 0.75rem;
   }
+  .xl\:gap-2\.5 {
+    gap: 0.9375rem;
+  }
   .xl\:gap-3 {
     gap: 1.125rem;
   }
@@ -15389,6 +16325,9 @@ body {
   .xl\:self-center {
     align-self: center;
   }
+  .xl\:overflow-auto {
+    overflow: auto;
+  }
   .xl\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -15435,6 +16374,10 @@ body {
     border-top-right-radius: 0.1875rem;
     border-bottom-right-radius: 0.1875rem;
   }
+  .xl\:rounded-t {
+    border-top-left-radius: 0.1875rem;
+    border-top-right-radius: 0.1875rem;
+  }
   .xl\:border {
     border-width: 1px;
   }
@@ -15579,6 +16522,9 @@ body {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-background), var(--tw-bg-opacity, 1));
   }
+  .xl\:bg-black\/20 {
+    background-color: rgb(0 0 0 / 0.2);
+  }
   .xl\:bg-border {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-border), var(--tw-bg-opacity, 1));
@@ -15660,6 +16606,10 @@ body {
     padding-left: 0rem;
     padding-right: 0rem;
   }
+  .xl\:px-0\.5 {
+    padding-left: 0.1875rem;
+    padding-right: 0.1875rem;
+  }
   .xl\:px-1 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
@@ -15684,6 +16634,10 @@ body {
     padding-left: 1.125rem;
     padding-right: 1.125rem;
   }
+  .xl\:px-3\.5 {
+    padding-left: 1.3125rem;
+    padding-right: 1.3125rem;
+  }
   .xl\:px-4 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -15700,14 +16654,26 @@ body {
     padding-left: 0.4375rem;
     padding-right: 0.4375rem;
   }
+  .xl\:px-\[8\%\] {
+    padding-left: 8%;
+    padding-right: 8%;
+  }
   .xl\:py-1\.5 {
     padding-top: 0.5625rem;
     padding-bottom: 0.5625rem;
   }
+  .xl\:py-2 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
   .xl\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
   }
+  .xl\:py-\[0\.25rem\] {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
   .xl\:py-\[0\.3125rem\] {
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;
@@ -15719,6 +16685,9 @@ body {
   .xl\:pb-12 {
     padding-bottom: 4.5rem;
   }
+  .xl\:pb-3 {
+    padding-bottom: 1.125rem;
+  }
   .xl\:pb-5 {
     padding-bottom: 1.875rem;
   }
@@ -15893,6 +16862,10 @@ body {
     --tw-text-opacity: 1;
     color: rgba(var(--colors-text-10), var(--tw-text-opacity, 1));
   }
+  .xl\:text-text-50 {
+    --tw-text-opacity: 1;
+    color: rgba(var(--colors-text-50), var(--tw-text-opacity, 1));
+  }
   .xl\:text-warning {
     --tw-text-opacity: 1;
     color: rgb(197 59 0 / var(--tw-text-opacity, 1));
@@ -15904,6 +16877,12 @@ body {
   .xl\:underline {
     text-decoration-line: underline;
   }
+  .xl\:opacity-0 {
+    opacity: 0;
+  }
+  .xl\:opacity-100 {
+    opacity: 1;
+  }
   .xl\:opacity-50 {
     opacity: 0.5;
   }
@@ -15912,6 +16891,11 @@ body {
     --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
+  .xl\:shadow-\[0_5px_10px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
+    --tw-shadow: 0 5px 10px rgba(0,0,0,0.2);
+    --tw-shadow-colored: 0 5px 10px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
   .xl\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
     --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
     --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
@@ -16195,6 +17179,15 @@ body {
       background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
     }
   }
+  .xl\:focus\:pointer-events-auto:focus {
+    pointer-events: auto;
+  }
+  .xl\:focus\:touch-auto:focus {
+    touch-action: auto;
+  }
+  .xl\:focus\:opacity-100:focus {
+    opacity: 1;
+  }
   .xl\:active\:bg-hero-50:active {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-hero-50), var(--tw-bg-opacity, 1));
@@ -16324,9 +17317,6 @@ body {
     background-color: rgba(var(--colors-pop), var(--tw-bg-opacity, 1));
   }
   @media not all and (min-width: 992px) {
-    .xl\:max-md\:mb-7 {
-      margin-bottom: 2.625rem;
-    }
     .xl\:max-md\:flex-col {
       flex-direction: column;
     }