@unifiedsoftware/styles 2.0.0-alpha.2 → 2.0.0-alpha.4

package/css/styles.css

@@ -1092,15 +1092,11 @@
   position: relative;
   border-radius: var(--us-accordion-border-radius);
   z-index: 0;
+}
+.us-accordion:not(.us-accordion--splitted) {
   overflow: hidden;
   background-color: white;
 }
-.us-accordion--bordered:not(.us-accordion--splitted) {
-  border: var(--us-accordion-border-width) var(--us-accordion-border-style) var(--us-accordion-border-color);
-}
-.us-accordion--shadow:not(.us-accordion--splitted) {
-  filter: drop-shadow(rgba(141, 141, 141, 0.15) 0.5px 1px 1px) drop-shadow(rgba(141, 141, 141, 0.15) 1px 2px 2px) drop-shadow(rgba(141, 141, 141, 0.15) 2px 4px 4px) drop-shadow(rgba(141, 141, 141, 0.15) 4px 8px 8px) drop-shadow(rgba(141, 141, 141, 0.15) 8px 16px 16px);
-}
 .us-accordion--splitted {
   display: grid;
   gap: var(--us-accordion-splitted-gap);
@@ -1109,13 +1105,8 @@
   border-radius: var(--us-accordion-border-radius);
   overflow: hidden;
 }
-.us-accordion--bordered.us-accordion--splitted .us-accordion-item {
-  border: var(--us-accordion-border-width) var(--us-accordion-border-style) var(--us-accordion-border-color);
-}
-.us-accordion--shadow.us-accordion--splitted .us-accordion-item {
-  filter: drop-shadow(rgba(141, 141, 141, 0.15) 0.5px 1px 1px) drop-shadow(rgba(141, 141, 141, 0.15) 1px 2px 2px) drop-shadow(rgba(141, 141, 141, 0.15) 2px 4px 4px) drop-shadow(rgba(141, 141, 141, 0.15) 4px 8px 8px) drop-shadow(rgba(141, 141, 141, 0.15) 8px 16px 16px);
-}
 .us-accordion-item {
+  position: relative;
   border-bottom: 1px solid #e6e6e6;
 }
 .us-accordion-item:last-child {
@@ -1607,6 +1598,7 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  justify-content: center;
 }
 .us-card-header--centered .us-card-header__start-content, .us-card-header--centered .us-card-header__end-content {
   position: absolute;
@@ -1712,56 +1704,66 @@
   object-fit: cover;
 }
 .us-card-header--underlined {
-  padding-bottom: var(--us-card-padding-y);
+  margin-bottom: var(--us-card-padding-y);
 }
 .us-card-header--underlined::after {
   content: "";
   position: absolute;
   left: calc(var(--us-card-padding-x) * -1);
   right: calc(var(--us-card-padding-x) * -1);
-  bottom: 0;
+  bottom: calc(var(--us-card-padding-y) * -1);
   border-bottom: 1px solid var(--us-card-border-color);
 }
 .us-card-footer--underlined {
-  padding-top: var(--us-card-padding-y);
+  margin-top: var(--us-card-padding-y);
 }
 .us-card-footer--underlined::after {
   content: "";
   position: absolute;
   left: calc(var(--us-card-padding-x) * -1);
   right: calc(var(--us-card-padding-x) * -1);
-  top: 0;
+  top: calc(var(--us-card-padding-y) * -1);
   border-top: 1px solid var(--us-card-border-color);
 }
-.us-card__content > .us-card-header:not(.us-card-header-underlined):last-child {
-  padding-bottom: 0;
+.us-card-header--underlined:last-child {
+  margin-bottom: 0;
 }
-.us-card__content > .us-card-header:not(.us-card-header-underlined):last-child::after {
+.us-card-header--underlined:last-child::after {
   border-bottom: none;
 }
-.us-card__content > .us-card-footer:not(.us-card-footer-underlined):last-child {
-  padding-top: 0;
-}
-.us-card__content > .us-card-footer:not(.us-card-footer-underlined):last-child::after {
+.us-card-footer--underlined:last-child::before {
   border-top: none;
 }
 
-.us-description__name {
-  font-size: 14px;
-  color: var(--us-secondary-action-color);
+.us-descriptions {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  row-gap: var(--us-descriptions-gap-x);
+  column-gap: var(--us-descriptions-gap-y);
+}
+
+.us-description__label {
+  font-size: var(--us-description-label-font-size);
+  font-weight: var(--us-description-text-font-weight);
+  color: var(--us-description-label-color);
+  opacity: var(--us-description-label-opacity);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: block;
 }
-.us-description__value {
-  font-size: 14px;
-  font-weight: 500;
+.us-description__content {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: block;
 }
+.us-description__text {
+  font-size: var(--us-description-text-font-size);
+  font-weight: var(--us-description-text-font-weight);
+  color: var(--us-description-text-color);
+  opacity: var(--us-description-text-opacity);
+}
 
 .us-result {
   flex-grow: 1;
@@ -2111,114 +2113,342 @@
   align-items: baseline;
 }
 
-.us-gap-0 {
+.us-fs-xs {
+  font-size: var(--us-fs-xs);
+}
+
+.us-fs-sm {
+  font-size: var(--us-fs-sm);
+}
+
+.us-fs-md {
+  font-size: var(--us-fs-md);
+}
+
+.us-fs-lg {
+  font-size: var(--us-fs-lg);
+}
+
+.us-fs-xl {
+  font-size: var(--us-fs-xl);
+}
+
+.us-fs-2xl {
+  font-size: var(--us-fs-2xl);
+}
+
+.us-fs-3xl {
+  font-size: var(--us-fs-3xl);
+}
+
+.us-fs-4xl {
+  font-size: var(--us-fs-4xl);
+}
+
+.us-fs-5xl {
+  font-size: var(--us-fs-5xl);
+}
+
+.us-g-0 {
   gap: 0;
 }
 
-.us-gap-1 {
+.us-g-1 {
   gap: 0.25rem;
 }
 
-.us-gap-2 {
+.us-g-2 {
   gap: 0.5rem;
 }
 
-.us-gap-3 {
+.us-g-3 {
   gap: 0.75rem;
 }
 
-.us-gap-4 {
+.us-g-4 {
   gap: 1rem;
 }
 
-.us-gap-5 {
+.us-g-5 {
   gap: 1.25rem;
 }
 
-.us-gap-6 {
+.us-g-6 {
   gap: 1.5rem;
 }
 
-.us-gap-7 {
+.us-g-7 {
   gap: 1.75rem;
 }
 
-.us-gap-8 {
+.us-g-8 {
   gap: 2rem;
 }
 
-.us-gap-x-0 {
+.us-gx-0 {
   column-gap: 0;
 }
 
-.us-gap-x-1 {
+.us-gx-1 {
   column-gap: 0.25rem;
 }
 
-.us-gap-x-2 {
+.us-gx-2 {
   column-gap: 0.5rem;
 }
 
-.us-gap-x-3 {
+.us-gx-3 {
   column-gap: 0.75rem;
 }
 
-.us-gap-x-4 {
+.us-gx-4 {
   column-gap: 1rem;
 }
 
-.us-gap-x-5 {
+.us-gx-5 {
   column-gap: 1.25rem;
 }
 
-.us-gap-x-6 {
+.us-gx-6 {
   column-gap: 1.5rem;
 }
 
-.us-gap-x-7 {
+.us-gx-7 {
   column-gap: 1.75rem;
 }
 
-.us-gap-x-8 {
+.us-gx-8 {
   column-gap: 2rem;
 }
 
-.us-gap-y-0 {
+.us-gy-0 {
   row-gap: 0;
 }
 
-.us-gap-y-1 {
+.us-gy-1 {
   row-gap: 0.25rem;
 }
 
-.us-gap-y-2 {
+.us-gy-2 {
   row-gap: 0.5rem;
 }
 
-.us-gap-y-3 {
+.us-gy-3 {
   row-gap: 0.75rem;
 }
 
-.us-gap-y-4 {
+.us-gy-4 {
   row-gap: 1rem;
 }
 
-.us-gap-y-5 {
+.us-gy-5 {
   row-gap: 1.25rem;
 }
 
-.us-gap-y-6 {
+.us-gy-6 {
   row-gap: 1.5rem;
 }
 
-.us-gap-y-7 {
+.us-gy-7 {
   row-gap: 1.75rem;
 }
 
-.us-gap-y-8 {
+.us-gy-8 {
   row-gap: 2rem;
 }
 
+.us-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.us-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.us-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.us-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.us-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.us-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.us-cols-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.us-cols-8 {
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+}
+
+.us-cols-9 {
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+}
+
+.us-cols-10 {
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+}
+
+.us-cols-11 {
+  grid-template-columns: repeat(11, minmax(0, 1fr));
+}
+
+.us-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.us-col-1 {
+  grid-column: span 1/span 1;
+}
+
+.us-col-2 {
+  grid-column: span 2/span 2;
+}
+
+.us-col-3 {
+  grid-column: span 3/span 3;
+}
+
+.us-col-4 {
+  grid-column: span 4/span 4;
+}
+
+.us-col-5 {
+  grid-column: span 5/span 5;
+}
+
+.us-col-6 {
+  grid-column: span 6/span 6;
+}
+
+.us-col-7 {
+  grid-column: span 7/span 7;
+}
+
+.us-col-8 {
+  grid-column: span 8/span 8;
+}
+
+.us-col-9 {
+  grid-column: span 9/span 9;
+}
+
+.us-col-10 {
+  grid-column: span 10/span 10;
+}
+
+.us-col-11 {
+  grid-column: span 11/span 11;
+}
+
+.us-col-12 {
+  grid-column: span 12/span 12;
+}
+
+.us-col-s-1 {
+  grid-column-start: 1;
+}
+
+.us-col-s-2 {
+  grid-column-start: 2;
+}
+
+.us-col-s-3 {
+  grid-column-start: 3;
+}
+
+.us-col-s-4 {
+  grid-column-start: 4;
+}
+
+.us-col-s-5 {
+  grid-column-start: 5;
+}
+
+.us-col-s-6 {
+  grid-column-start: 6;
+}
+
+.us-col-s-7 {
+  grid-column-start: 7;
+}
+
+.us-col-s-8 {
+  grid-column-start: 8;
+}
+
+.us-col-s-9 {
+  grid-column-start: 9;
+}
+
+.us-col-s-10 {
+  grid-column-start: 10;
+}
+
+.us-col-s-11 {
+  grid-column-start: 11;
+}
+
+.us-col-s-12 {
+  grid-column-start: 12;
+}
+
+.us-col-e-1 {
+  grid-column: 1;
+}
+
+.us-col-e-2 {
+  grid-column: 2;
+}
+
+.us-col-e-3 {
+  grid-column: 3;
+}
+
+.us-col-e-4 {
+  grid-column: 4;
+}
+
+.us-col-e-5 {
+  grid-column: 5;
+}
+
+.us-col-e-6 {
+  grid-column: 6;
+}
+
+.us-col-e-7 {
+  grid-column: 7;
+}
+
+.us-col-e-8 {
+  grid-column: 8;
+}
+
+.us-col-e-9 {
+  grid-column: 9;
+}
+
+.us-col-e-10 {
+  grid-column: 10;
+}
+
+.us-col-e-11 {
+  grid-column: 11;
+}
+
+.us-col-e-12 {
+  grid-column: 12;
+}
+
 @media screen and (min-width: 0px) {
   .xs\:us-h-full {
     height: 100%;
@@ -2316,89 +2546,260 @@
   .xs\:us-items-baseline {
     align-items: baseline;
   }
-  .xs\:us-gap-0 {
+  .xs\:us-fs-xs {
+    font-size: var(--us-fs-xs);
+  }
+  .xs\:us-fs-sm {
+    font-size: var(--us-fs-sm);
+  }
+  .xs\:us-fs-md {
+    font-size: var(--us-fs-md);
+  }
+  .xs\:us-fs-lg {
+    font-size: var(--us-fs-lg);
+  }
+  .xs\:us-fs-xl {
+    font-size: var(--us-fs-xl);
+  }
+  .xs\:us-fs-2xl {
+    font-size: var(--us-fs-2xl);
+  }
+  .xs\:us-fs-3xl {
+    font-size: var(--us-fs-3xl);
+  }
+  .xs\:us-fs-4xl {
+    font-size: var(--us-fs-4xl);
+  }
+  .xs\:us-fs-5xl {
+    font-size: var(--us-fs-5xl);
+  }
+  .xs\:us-g-0 {
     gap: 0;
   }
-  .xs\:us-gap-1 {
+  .xs\:us-g-1 {
     gap: 0.25rem;
   }
-  .xs\:us-gap-2 {
+  .xs\:us-g-2 {
     gap: 0.5rem;
   }
-  .xs\:us-gap-3 {
+  .xs\:us-g-3 {
     gap: 0.75rem;
   }
-  .xs\:us-gap-4 {
+  .xs\:us-g-4 {
     gap: 1rem;
   }
-  .xs\:us-gap-5 {
+  .xs\:us-g-5 {
     gap: 1.25rem;
   }
-  .xs\:us-gap-6 {
+  .xs\:us-g-6 {
     gap: 1.5rem;
   }
-  .xs\:us-gap-7 {
+  .xs\:us-g-7 {
     gap: 1.75rem;
   }
-  .xs\:us-gap-8 {
+  .xs\:us-g-8 {
     gap: 2rem;
   }
-  .xs\:us-gap-x-0 {
+  .xs\:us-gx-0 {
     column-gap: 0;
   }
-  .xs\:us-gap-x-1 {
+  .xs\:us-gx-1 {
     column-gap: 0.25rem;
   }
-  .xs\:us-gap-x-2 {
+  .xs\:us-gx-2 {
     column-gap: 0.5rem;
   }
-  .xs\:us-gap-x-3 {
+  .xs\:us-gx-3 {
     column-gap: 0.75rem;
   }
-  .xs\:us-gap-x-4 {
+  .xs\:us-gx-4 {
     column-gap: 1rem;
   }
-  .xs\:us-gap-x-5 {
+  .xs\:us-gx-5 {
     column-gap: 1.25rem;
   }
-  .xs\:us-gap-x-6 {
+  .xs\:us-gx-6 {
     column-gap: 1.5rem;
   }
-  .xs\:us-gap-x-7 {
+  .xs\:us-gx-7 {
     column-gap: 1.75rem;
   }
-  .xs\:us-gap-x-8 {
+  .xs\:us-gx-8 {
     column-gap: 2rem;
   }
-  .xs\:us-gap-y-0 {
+  .xs\:us-gy-0 {
     row-gap: 0;
   }
-  .xs\:us-gap-y-1 {
+  .xs\:us-gy-1 {
     row-gap: 0.25rem;
   }
-  .xs\:us-gap-y-2 {
+  .xs\:us-gy-2 {
     row-gap: 0.5rem;
   }
-  .xs\:us-gap-y-3 {
+  .xs\:us-gy-3 {
     row-gap: 0.75rem;
   }
-  .xs\:us-gap-y-4 {
+  .xs\:us-gy-4 {
     row-gap: 1rem;
   }
-  .xs\:us-gap-y-5 {
+  .xs\:us-gy-5 {
     row-gap: 1.25rem;
   }
-  .xs\:us-gap-y-6 {
+  .xs\:us-gy-6 {
     row-gap: 1.5rem;
   }
-  .xs\:us-gap-y-7 {
+  .xs\:us-gy-7 {
     row-gap: 1.75rem;
   }
-  .xs\:us-gap-y-8 {
+  .xs\:us-gy-8 {
     row-gap: 2rem;
   }
+  .xs\:us-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .xs\:us-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .xs\:us-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .xs\:us-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .xs\:us-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .xs\:us-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .xs\:us-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .xs\:us-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .xs\:us-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .xs\:us-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .xs\:us-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .xs\:us-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .xs\:us-col-1 {
+    grid-column: span 1/span 1;
+  }
+  .xs\:us-col-2 {
+    grid-column: span 2/span 2;
+  }
+  .xs\:us-col-3 {
+    grid-column: span 3/span 3;
+  }
+  .xs\:us-col-4 {
+    grid-column: span 4/span 4;
+  }
+  .xs\:us-col-5 {
+    grid-column: span 5/span 5;
+  }
+  .xs\:us-col-6 {
+    grid-column: span 6/span 6;
+  }
+  .xs\:us-col-7 {
+    grid-column: span 7/span 7;
+  }
+  .xs\:us-col-8 {
+    grid-column: span 8/span 8;
+  }
+  .xs\:us-col-9 {
+    grid-column: span 9/span 9;
+  }
+  .xs\:us-col-10 {
+    grid-column: span 10/span 10;
+  }
+  .xs\:us-col-11 {
+    grid-column: span 11/span 11;
+  }
+  .xs\:us-col-12 {
+    grid-column: span 12/span 12;
+  }
+  .xs\:us-col-s-1 {
+    grid-column-start: 1;
+  }
+  .xs\:us-col-s-2 {
+    grid-column-start: 2;
+  }
+  .xs\:us-col-s-3 {
+    grid-column-start: 3;
+  }
+  .xs\:us-col-s-4 {
+    grid-column-start: 4;
+  }
+  .xs\:us-col-s-5 {
+    grid-column-start: 5;
+  }
+  .xs\:us-col-s-6 {
+    grid-column-start: 6;
+  }
+  .xs\:us-col-s-7 {
+    grid-column-start: 7;
+  }
+  .xs\:us-col-s-8 {
+    grid-column-start: 8;
+  }
+  .xs\:us-col-s-9 {
+    grid-column-start: 9;
+  }
+  .xs\:us-col-s-10 {
+    grid-column-start: 10;
+  }
+  .xs\:us-col-s-11 {
+    grid-column-start: 11;
+  }
+  .xs\:us-col-s-12 {
+    grid-column-start: 12;
+  }
+  .xs\:us-col-e-1 {
+    grid-column: 1;
+  }
+  .xs\:us-col-e-2 {
+    grid-column: 2;
+  }
+  .xs\:us-col-e-3 {
+    grid-column: 3;
+  }
+  .xs\:us-col-e-4 {
+    grid-column: 4;
+  }
+  .xs\:us-col-e-5 {
+    grid-column: 5;
+  }
+  .xs\:us-col-e-6 {
+    grid-column: 6;
+  }
+  .xs\:us-col-e-7 {
+    grid-column: 7;
+  }
+  .xs\:us-col-e-8 {
+    grid-column: 8;
+  }
+  .xs\:us-col-e-9 {
+    grid-column: 9;
+  }
+  .xs\:us-col-e-10 {
+    grid-column: 10;
+  }
+  .xs\:us-col-e-11 {
+    grid-column: 11;
+  }
+  .xs\:us-col-e-12 {
+    grid-column: 12;
+  }
 }
-@media screen and (min-width: 600px) {
+@media screen and (min-width: 640px) {
   .sm\:us-h-full {
     height: 100%;
   }
@@ -2495,87 +2896,258 @@
   .sm\:us-items-baseline {
     align-items: baseline;
   }
-  .sm\:us-gap-0 {
+  .sm\:us-fs-xs {
+    font-size: var(--us-fs-xs);
+  }
+  .sm\:us-fs-sm {
+    font-size: var(--us-fs-sm);
+  }
+  .sm\:us-fs-md {
+    font-size: var(--us-fs-md);
+  }
+  .sm\:us-fs-lg {
+    font-size: var(--us-fs-lg);
+  }
+  .sm\:us-fs-xl {
+    font-size: var(--us-fs-xl);
+  }
+  .sm\:us-fs-2xl {
+    font-size: var(--us-fs-2xl);
+  }
+  .sm\:us-fs-3xl {
+    font-size: var(--us-fs-3xl);
+  }
+  .sm\:us-fs-4xl {
+    font-size: var(--us-fs-4xl);
+  }
+  .sm\:us-fs-5xl {
+    font-size: var(--us-fs-5xl);
+  }
+  .sm\:us-g-0 {
     gap: 0;
   }
-  .sm\:us-gap-1 {
+  .sm\:us-g-1 {
     gap: 0.25rem;
   }
-  .sm\:us-gap-2 {
+  .sm\:us-g-2 {
     gap: 0.5rem;
   }
-  .sm\:us-gap-3 {
+  .sm\:us-g-3 {
     gap: 0.75rem;
   }
-  .sm\:us-gap-4 {
+  .sm\:us-g-4 {
     gap: 1rem;
   }
-  .sm\:us-gap-5 {
+  .sm\:us-g-5 {
     gap: 1.25rem;
   }
-  .sm\:us-gap-6 {
+  .sm\:us-g-6 {
     gap: 1.5rem;
   }
-  .sm\:us-gap-7 {
+  .sm\:us-g-7 {
     gap: 1.75rem;
   }
-  .sm\:us-gap-8 {
+  .sm\:us-g-8 {
     gap: 2rem;
   }
-  .sm\:us-gap-x-0 {
+  .sm\:us-gx-0 {
     column-gap: 0;
   }
-  .sm\:us-gap-x-1 {
+  .sm\:us-gx-1 {
     column-gap: 0.25rem;
   }
-  .sm\:us-gap-x-2 {
+  .sm\:us-gx-2 {
     column-gap: 0.5rem;
   }
-  .sm\:us-gap-x-3 {
+  .sm\:us-gx-3 {
     column-gap: 0.75rem;
   }
-  .sm\:us-gap-x-4 {
+  .sm\:us-gx-4 {
     column-gap: 1rem;
   }
-  .sm\:us-gap-x-5 {
+  .sm\:us-gx-5 {
     column-gap: 1.25rem;
   }
-  .sm\:us-gap-x-6 {
+  .sm\:us-gx-6 {
     column-gap: 1.5rem;
   }
-  .sm\:us-gap-x-7 {
+  .sm\:us-gx-7 {
     column-gap: 1.75rem;
   }
-  .sm\:us-gap-x-8 {
+  .sm\:us-gx-8 {
     column-gap: 2rem;
   }
-  .sm\:us-gap-y-0 {
+  .sm\:us-gy-0 {
     row-gap: 0;
   }
-  .sm\:us-gap-y-1 {
+  .sm\:us-gy-1 {
     row-gap: 0.25rem;
   }
-  .sm\:us-gap-y-2 {
+  .sm\:us-gy-2 {
     row-gap: 0.5rem;
   }
-  .sm\:us-gap-y-3 {
+  .sm\:us-gy-3 {
     row-gap: 0.75rem;
   }
-  .sm\:us-gap-y-4 {
+  .sm\:us-gy-4 {
     row-gap: 1rem;
   }
-  .sm\:us-gap-y-5 {
+  .sm\:us-gy-5 {
     row-gap: 1.25rem;
   }
-  .sm\:us-gap-y-6 {
+  .sm\:us-gy-6 {
     row-gap: 1.5rem;
   }
-  .sm\:us-gap-y-7 {
+  .sm\:us-gy-7 {
     row-gap: 1.75rem;
   }
-  .sm\:us-gap-y-8 {
+  .sm\:us-gy-8 {
     row-gap: 2rem;
   }
+  .sm\:us-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .sm\:us-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .sm\:us-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .sm\:us-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .sm\:us-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .sm\:us-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .sm\:us-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .sm\:us-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .sm\:us-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .sm\:us-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .sm\:us-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .sm\:us-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .sm\:us-col-1 {
+    grid-column: span 1/span 1;
+  }
+  .sm\:us-col-2 {
+    grid-column: span 2/span 2;
+  }
+  .sm\:us-col-3 {
+    grid-column: span 3/span 3;
+  }
+  .sm\:us-col-4 {
+    grid-column: span 4/span 4;
+  }
+  .sm\:us-col-5 {
+    grid-column: span 5/span 5;
+  }
+  .sm\:us-col-6 {
+    grid-column: span 6/span 6;
+  }
+  .sm\:us-col-7 {
+    grid-column: span 7/span 7;
+  }
+  .sm\:us-col-8 {
+    grid-column: span 8/span 8;
+  }
+  .sm\:us-col-9 {
+    grid-column: span 9/span 9;
+  }
+  .sm\:us-col-10 {
+    grid-column: span 10/span 10;
+  }
+  .sm\:us-col-11 {
+    grid-column: span 11/span 11;
+  }
+  .sm\:us-col-12 {
+    grid-column: span 12/span 12;
+  }
+  .sm\:us-col-s-1 {
+    grid-column-start: 1;
+  }
+  .sm\:us-col-s-2 {
+    grid-column-start: 2;
+  }
+  .sm\:us-col-s-3 {
+    grid-column-start: 3;
+  }
+  .sm\:us-col-s-4 {
+    grid-column-start: 4;
+  }
+  .sm\:us-col-s-5 {
+    grid-column-start: 5;
+  }
+  .sm\:us-col-s-6 {
+    grid-column-start: 6;
+  }
+  .sm\:us-col-s-7 {
+    grid-column-start: 7;
+  }
+  .sm\:us-col-s-8 {
+    grid-column-start: 8;
+  }
+  .sm\:us-col-s-9 {
+    grid-column-start: 9;
+  }
+  .sm\:us-col-s-10 {
+    grid-column-start: 10;
+  }
+  .sm\:us-col-s-11 {
+    grid-column-start: 11;
+  }
+  .sm\:us-col-s-12 {
+    grid-column-start: 12;
+  }
+  .sm\:us-col-e-1 {
+    grid-column: 1;
+  }
+  .sm\:us-col-e-2 {
+    grid-column: 2;
+  }
+  .sm\:us-col-e-3 {
+    grid-column: 3;
+  }
+  .sm\:us-col-e-4 {
+    grid-column: 4;
+  }
+  .sm\:us-col-e-5 {
+    grid-column: 5;
+  }
+  .sm\:us-col-e-6 {
+    grid-column: 6;
+  }
+  .sm\:us-col-e-7 {
+    grid-column: 7;
+  }
+  .sm\:us-col-e-8 {
+    grid-column: 8;
+  }
+  .sm\:us-col-e-9 {
+    grid-column: 9;
+  }
+  .sm\:us-col-e-10 {
+    grid-column: 10;
+  }
+  .sm\:us-col-e-11 {
+    grid-column: 11;
+  }
+  .sm\:us-col-e-12 {
+    grid-column: 12;
+  }
 }
 @media screen and (min-width: 960px) {
   .md\:us-h-full {
@@ -2674,89 +3246,260 @@
   .md\:us-items-baseline {
     align-items: baseline;
   }
-  .md\:us-gap-0 {
+  .md\:us-fs-xs {
+    font-size: var(--us-fs-xs);
+  }
+  .md\:us-fs-sm {
+    font-size: var(--us-fs-sm);
+  }
+  .md\:us-fs-md {
+    font-size: var(--us-fs-md);
+  }
+  .md\:us-fs-lg {
+    font-size: var(--us-fs-lg);
+  }
+  .md\:us-fs-xl {
+    font-size: var(--us-fs-xl);
+  }
+  .md\:us-fs-2xl {
+    font-size: var(--us-fs-2xl);
+  }
+  .md\:us-fs-3xl {
+    font-size: var(--us-fs-3xl);
+  }
+  .md\:us-fs-4xl {
+    font-size: var(--us-fs-4xl);
+  }
+  .md\:us-fs-5xl {
+    font-size: var(--us-fs-5xl);
+  }
+  .md\:us-g-0 {
     gap: 0;
   }
-  .md\:us-gap-1 {
+  .md\:us-g-1 {
     gap: 0.25rem;
   }
-  .md\:us-gap-2 {
+  .md\:us-g-2 {
     gap: 0.5rem;
   }
-  .md\:us-gap-3 {
+  .md\:us-g-3 {
     gap: 0.75rem;
   }
-  .md\:us-gap-4 {
+  .md\:us-g-4 {
     gap: 1rem;
   }
-  .md\:us-gap-5 {
+  .md\:us-g-5 {
     gap: 1.25rem;
   }
-  .md\:us-gap-6 {
+  .md\:us-g-6 {
     gap: 1.5rem;
   }
-  .md\:us-gap-7 {
+  .md\:us-g-7 {
     gap: 1.75rem;
   }
-  .md\:us-gap-8 {
+  .md\:us-g-8 {
     gap: 2rem;
   }
-  .md\:us-gap-x-0 {
+  .md\:us-gx-0 {
     column-gap: 0;
   }
-  .md\:us-gap-x-1 {
+  .md\:us-gx-1 {
     column-gap: 0.25rem;
   }
-  .md\:us-gap-x-2 {
+  .md\:us-gx-2 {
     column-gap: 0.5rem;
   }
-  .md\:us-gap-x-3 {
+  .md\:us-gx-3 {
     column-gap: 0.75rem;
   }
-  .md\:us-gap-x-4 {
+  .md\:us-gx-4 {
     column-gap: 1rem;
   }
-  .md\:us-gap-x-5 {
+  .md\:us-gx-5 {
     column-gap: 1.25rem;
   }
-  .md\:us-gap-x-6 {
+  .md\:us-gx-6 {
     column-gap: 1.5rem;
   }
-  .md\:us-gap-x-7 {
+  .md\:us-gx-7 {
     column-gap: 1.75rem;
   }
-  .md\:us-gap-x-8 {
+  .md\:us-gx-8 {
     column-gap: 2rem;
   }
-  .md\:us-gap-y-0 {
+  .md\:us-gy-0 {
     row-gap: 0;
   }
-  .md\:us-gap-y-1 {
+  .md\:us-gy-1 {
     row-gap: 0.25rem;
   }
-  .md\:us-gap-y-2 {
+  .md\:us-gy-2 {
     row-gap: 0.5rem;
   }
-  .md\:us-gap-y-3 {
+  .md\:us-gy-3 {
     row-gap: 0.75rem;
   }
-  .md\:us-gap-y-4 {
+  .md\:us-gy-4 {
     row-gap: 1rem;
   }
-  .md\:us-gap-y-5 {
+  .md\:us-gy-5 {
     row-gap: 1.25rem;
   }
-  .md\:us-gap-y-6 {
+  .md\:us-gy-6 {
     row-gap: 1.5rem;
   }
-  .md\:us-gap-y-7 {
+  .md\:us-gy-7 {
     row-gap: 1.75rem;
   }
-  .md\:us-gap-y-8 {
+  .md\:us-gy-8 {
     row-gap: 2rem;
   }
+  .md\:us-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .md\:us-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .md\:us-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .md\:us-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .md\:us-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .md\:us-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .md\:us-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .md\:us-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .md\:us-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .md\:us-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .md\:us-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .md\:us-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .md\:us-col-1 {
+    grid-column: span 1/span 1;
+  }
+  .md\:us-col-2 {
+    grid-column: span 2/span 2;
+  }
+  .md\:us-col-3 {
+    grid-column: span 3/span 3;
+  }
+  .md\:us-col-4 {
+    grid-column: span 4/span 4;
+  }
+  .md\:us-col-5 {
+    grid-column: span 5/span 5;
+  }
+  .md\:us-col-6 {
+    grid-column: span 6/span 6;
+  }
+  .md\:us-col-7 {
+    grid-column: span 7/span 7;
+  }
+  .md\:us-col-8 {
+    grid-column: span 8/span 8;
+  }
+  .md\:us-col-9 {
+    grid-column: span 9/span 9;
+  }
+  .md\:us-col-10 {
+    grid-column: span 10/span 10;
+  }
+  .md\:us-col-11 {
+    grid-column: span 11/span 11;
+  }
+  .md\:us-col-12 {
+    grid-column: span 12/span 12;
+  }
+  .md\:us-col-s-1 {
+    grid-column-start: 1;
+  }
+  .md\:us-col-s-2 {
+    grid-column-start: 2;
+  }
+  .md\:us-col-s-3 {
+    grid-column-start: 3;
+  }
+  .md\:us-col-s-4 {
+    grid-column-start: 4;
+  }
+  .md\:us-col-s-5 {
+    grid-column-start: 5;
+  }
+  .md\:us-col-s-6 {
+    grid-column-start: 6;
+  }
+  .md\:us-col-s-7 {
+    grid-column-start: 7;
+  }
+  .md\:us-col-s-8 {
+    grid-column-start: 8;
+  }
+  .md\:us-col-s-9 {
+    grid-column-start: 9;
+  }
+  .md\:us-col-s-10 {
+    grid-column-start: 10;
+  }
+  .md\:us-col-s-11 {
+    grid-column-start: 11;
+  }
+  .md\:us-col-s-12 {
+    grid-column-start: 12;
+  }
+  .md\:us-col-e-1 {
+    grid-column: 1;
+  }
+  .md\:us-col-e-2 {
+    grid-column: 2;
+  }
+  .md\:us-col-e-3 {
+    grid-column: 3;
+  }
+  .md\:us-col-e-4 {
+    grid-column: 4;
+  }
+  .md\:us-col-e-5 {
+    grid-column: 5;
+  }
+  .md\:us-col-e-6 {
+    grid-column: 6;
+  }
+  .md\:us-col-e-7 {
+    grid-column: 7;
+  }
+  .md\:us-col-e-8 {
+    grid-column: 8;
+  }
+  .md\:us-col-e-9 {
+    grid-column: 9;
+  }
+  .md\:us-col-e-10 {
+    grid-column: 10;
+  }
+  .md\:us-col-e-11 {
+    grid-column: 11;
+  }
+  .md\:us-col-e-12 {
+    grid-column: 12;
+  }
 }
-@media screen and (min-width: 1264px) {
+@media screen and (min-width: 1024px) {
   .lg\:us-h-full {
     height: 100%;
   }
@@ -2853,89 +3596,260 @@
   .lg\:us-items-baseline {
     align-items: baseline;
   }
-  .lg\:us-gap-0 {
+  .lg\:us-fs-xs {
+    font-size: var(--us-fs-xs);
+  }
+  .lg\:us-fs-sm {
+    font-size: var(--us-fs-sm);
+  }
+  .lg\:us-fs-md {
+    font-size: var(--us-fs-md);
+  }
+  .lg\:us-fs-lg {
+    font-size: var(--us-fs-lg);
+  }
+  .lg\:us-fs-xl {
+    font-size: var(--us-fs-xl);
+  }
+  .lg\:us-fs-2xl {
+    font-size: var(--us-fs-2xl);
+  }
+  .lg\:us-fs-3xl {
+    font-size: var(--us-fs-3xl);
+  }
+  .lg\:us-fs-4xl {
+    font-size: var(--us-fs-4xl);
+  }
+  .lg\:us-fs-5xl {
+    font-size: var(--us-fs-5xl);
+  }
+  .lg\:us-g-0 {
     gap: 0;
   }
-  .lg\:us-gap-1 {
+  .lg\:us-g-1 {
     gap: 0.25rem;
   }
-  .lg\:us-gap-2 {
+  .lg\:us-g-2 {
     gap: 0.5rem;
   }
-  .lg\:us-gap-3 {
+  .lg\:us-g-3 {
     gap: 0.75rem;
   }
-  .lg\:us-gap-4 {
+  .lg\:us-g-4 {
     gap: 1rem;
   }
-  .lg\:us-gap-5 {
+  .lg\:us-g-5 {
     gap: 1.25rem;
   }
-  .lg\:us-gap-6 {
+  .lg\:us-g-6 {
     gap: 1.5rem;
   }
-  .lg\:us-gap-7 {
+  .lg\:us-g-7 {
     gap: 1.75rem;
   }
-  .lg\:us-gap-8 {
+  .lg\:us-g-8 {
     gap: 2rem;
   }
-  .lg\:us-gap-x-0 {
+  .lg\:us-gx-0 {
     column-gap: 0;
   }
-  .lg\:us-gap-x-1 {
+  .lg\:us-gx-1 {
     column-gap: 0.25rem;
   }
-  .lg\:us-gap-x-2 {
+  .lg\:us-gx-2 {
     column-gap: 0.5rem;
   }
-  .lg\:us-gap-x-3 {
+  .lg\:us-gx-3 {
     column-gap: 0.75rem;
   }
-  .lg\:us-gap-x-4 {
+  .lg\:us-gx-4 {
     column-gap: 1rem;
   }
-  .lg\:us-gap-x-5 {
+  .lg\:us-gx-5 {
     column-gap: 1.25rem;
   }
-  .lg\:us-gap-x-6 {
+  .lg\:us-gx-6 {
     column-gap: 1.5rem;
   }
-  .lg\:us-gap-x-7 {
+  .lg\:us-gx-7 {
     column-gap: 1.75rem;
   }
-  .lg\:us-gap-x-8 {
+  .lg\:us-gx-8 {
     column-gap: 2rem;
   }
-  .lg\:us-gap-y-0 {
+  .lg\:us-gy-0 {
     row-gap: 0;
   }
-  .lg\:us-gap-y-1 {
+  .lg\:us-gy-1 {
     row-gap: 0.25rem;
   }
-  .lg\:us-gap-y-2 {
+  .lg\:us-gy-2 {
     row-gap: 0.5rem;
   }
-  .lg\:us-gap-y-3 {
+  .lg\:us-gy-3 {
     row-gap: 0.75rem;
   }
-  .lg\:us-gap-y-4 {
+  .lg\:us-gy-4 {
     row-gap: 1rem;
   }
-  .lg\:us-gap-y-5 {
+  .lg\:us-gy-5 {
     row-gap: 1.25rem;
   }
-  .lg\:us-gap-y-6 {
+  .lg\:us-gy-6 {
     row-gap: 1.5rem;
   }
-  .lg\:us-gap-y-7 {
+  .lg\:us-gy-7 {
     row-gap: 1.75rem;
   }
-  .lg\:us-gap-y-8 {
+  .lg\:us-gy-8 {
     row-gap: 2rem;
   }
+  .lg\:us-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .lg\:us-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .lg\:us-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .lg\:us-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .lg\:us-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .lg\:us-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .lg\:us-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .lg\:us-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .lg\:us-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .lg\:us-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .lg\:us-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .lg\:us-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .lg\:us-col-1 {
+    grid-column: span 1/span 1;
+  }
+  .lg\:us-col-2 {
+    grid-column: span 2/span 2;
+  }
+  .lg\:us-col-3 {
+    grid-column: span 3/span 3;
+  }
+  .lg\:us-col-4 {
+    grid-column: span 4/span 4;
+  }
+  .lg\:us-col-5 {
+    grid-column: span 5/span 5;
+  }
+  .lg\:us-col-6 {
+    grid-column: span 6/span 6;
+  }
+  .lg\:us-col-7 {
+    grid-column: span 7/span 7;
+  }
+  .lg\:us-col-8 {
+    grid-column: span 8/span 8;
+  }
+  .lg\:us-col-9 {
+    grid-column: span 9/span 9;
+  }
+  .lg\:us-col-10 {
+    grid-column: span 10/span 10;
+  }
+  .lg\:us-col-11 {
+    grid-column: span 11/span 11;
+  }
+  .lg\:us-col-12 {
+    grid-column: span 12/span 12;
+  }
+  .lg\:us-col-s-1 {
+    grid-column-start: 1;
+  }
+  .lg\:us-col-s-2 {
+    grid-column-start: 2;
+  }
+  .lg\:us-col-s-3 {
+    grid-column-start: 3;
+  }
+  .lg\:us-col-s-4 {
+    grid-column-start: 4;
+  }
+  .lg\:us-col-s-5 {
+    grid-column-start: 5;
+  }
+  .lg\:us-col-s-6 {
+    grid-column-start: 6;
+  }
+  .lg\:us-col-s-7 {
+    grid-column-start: 7;
+  }
+  .lg\:us-col-s-8 {
+    grid-column-start: 8;
+  }
+  .lg\:us-col-s-9 {
+    grid-column-start: 9;
+  }
+  .lg\:us-col-s-10 {
+    grid-column-start: 10;
+  }
+  .lg\:us-col-s-11 {
+    grid-column-start: 11;
+  }
+  .lg\:us-col-s-12 {
+    grid-column-start: 12;
+  }
+  .lg\:us-col-e-1 {
+    grid-column: 1;
+  }
+  .lg\:us-col-e-2 {
+    grid-column: 2;
+  }
+  .lg\:us-col-e-3 {
+    grid-column: 3;
+  }
+  .lg\:us-col-e-4 {
+    grid-column: 4;
+  }
+  .lg\:us-col-e-5 {
+    grid-column: 5;
+  }
+  .lg\:us-col-e-6 {
+    grid-column: 6;
+  }
+  .lg\:us-col-e-7 {
+    grid-column: 7;
+  }
+  .lg\:us-col-e-8 {
+    grid-column: 8;
+  }
+  .lg\:us-col-e-9 {
+    grid-column: 9;
+  }
+  .lg\:us-col-e-10 {
+    grid-column: 10;
+  }
+  .lg\:us-col-e-11 {
+    grid-column: 11;
+  }
+  .lg\:us-col-e-12 {
+    grid-column: 12;
+  }
 }
-@media screen and (min-width: 1904px) {
+@media screen and (min-width: 1280px) {
   .xl\:us-h-full {
     height: 100%;
   }
@@ -3032,87 +3946,258 @@
   .xl\:us-items-baseline {
     align-items: baseline;
   }
-  .xl\:us-gap-0 {
+  .xl\:us-fs-xs {
+    font-size: var(--us-fs-xs);
+  }
+  .xl\:us-fs-sm {
+    font-size: var(--us-fs-sm);
+  }
+  .xl\:us-fs-md {
+    font-size: var(--us-fs-md);
+  }
+  .xl\:us-fs-lg {
+    font-size: var(--us-fs-lg);
+  }
+  .xl\:us-fs-xl {
+    font-size: var(--us-fs-xl);
+  }
+  .xl\:us-fs-2xl {
+    font-size: var(--us-fs-2xl);
+  }
+  .xl\:us-fs-3xl {
+    font-size: var(--us-fs-3xl);
+  }
+  .xl\:us-fs-4xl {
+    font-size: var(--us-fs-4xl);
+  }
+  .xl\:us-fs-5xl {
+    font-size: var(--us-fs-5xl);
+  }
+  .xl\:us-g-0 {
     gap: 0;
   }
-  .xl\:us-gap-1 {
+  .xl\:us-g-1 {
     gap: 0.25rem;
   }
-  .xl\:us-gap-2 {
+  .xl\:us-g-2 {
     gap: 0.5rem;
   }
-  .xl\:us-gap-3 {
+  .xl\:us-g-3 {
     gap: 0.75rem;
   }
-  .xl\:us-gap-4 {
+  .xl\:us-g-4 {
     gap: 1rem;
   }
-  .xl\:us-gap-5 {
+  .xl\:us-g-5 {
     gap: 1.25rem;
   }
-  .xl\:us-gap-6 {
+  .xl\:us-g-6 {
     gap: 1.5rem;
   }
-  .xl\:us-gap-7 {
+  .xl\:us-g-7 {
     gap: 1.75rem;
   }
-  .xl\:us-gap-8 {
+  .xl\:us-g-8 {
     gap: 2rem;
   }
-  .xl\:us-gap-x-0 {
+  .xl\:us-gx-0 {
     column-gap: 0;
   }
-  .xl\:us-gap-x-1 {
+  .xl\:us-gx-1 {
     column-gap: 0.25rem;
   }
-  .xl\:us-gap-x-2 {
+  .xl\:us-gx-2 {
     column-gap: 0.5rem;
   }
-  .xl\:us-gap-x-3 {
+  .xl\:us-gx-3 {
     column-gap: 0.75rem;
   }
-  .xl\:us-gap-x-4 {
+  .xl\:us-gx-4 {
     column-gap: 1rem;
   }
-  .xl\:us-gap-x-5 {
+  .xl\:us-gx-5 {
     column-gap: 1.25rem;
   }
-  .xl\:us-gap-x-6 {
+  .xl\:us-gx-6 {
     column-gap: 1.5rem;
   }
-  .xl\:us-gap-x-7 {
+  .xl\:us-gx-7 {
     column-gap: 1.75rem;
   }
-  .xl\:us-gap-x-8 {
+  .xl\:us-gx-8 {
     column-gap: 2rem;
   }
-  .xl\:us-gap-y-0 {
+  .xl\:us-gy-0 {
     row-gap: 0;
   }
-  .xl\:us-gap-y-1 {
+  .xl\:us-gy-1 {
     row-gap: 0.25rem;
   }
-  .xl\:us-gap-y-2 {
+  .xl\:us-gy-2 {
     row-gap: 0.5rem;
   }
-  .xl\:us-gap-y-3 {
+  .xl\:us-gy-3 {
     row-gap: 0.75rem;
   }
-  .xl\:us-gap-y-4 {
+  .xl\:us-gy-4 {
     row-gap: 1rem;
   }
-  .xl\:us-gap-y-5 {
+  .xl\:us-gy-5 {
     row-gap: 1.25rem;
   }
-  .xl\:us-gap-y-6 {
+  .xl\:us-gy-6 {
     row-gap: 1.5rem;
   }
-  .xl\:us-gap-y-7 {
+  .xl\:us-gy-7 {
     row-gap: 1.75rem;
   }
-  .xl\:us-gap-y-8 {
+  .xl\:us-gy-8 {
     row-gap: 2rem;
   }
+  .xl\:us-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .xl\:us-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .xl\:us-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .xl\:us-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .xl\:us-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .xl\:us-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .xl\:us-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .xl\:us-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .xl\:us-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .xl\:us-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .xl\:us-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .xl\:us-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .xl\:us-col-1 {
+    grid-column: span 1/span 1;
+  }
+  .xl\:us-col-2 {
+    grid-column: span 2/span 2;
+  }
+  .xl\:us-col-3 {
+    grid-column: span 3/span 3;
+  }
+  .xl\:us-col-4 {
+    grid-column: span 4/span 4;
+  }
+  .xl\:us-col-5 {
+    grid-column: span 5/span 5;
+  }
+  .xl\:us-col-6 {
+    grid-column: span 6/span 6;
+  }
+  .xl\:us-col-7 {
+    grid-column: span 7/span 7;
+  }
+  .xl\:us-col-8 {
+    grid-column: span 8/span 8;
+  }
+  .xl\:us-col-9 {
+    grid-column: span 9/span 9;
+  }
+  .xl\:us-col-10 {
+    grid-column: span 10/span 10;
+  }
+  .xl\:us-col-11 {
+    grid-column: span 11/span 11;
+  }
+  .xl\:us-col-12 {
+    grid-column: span 12/span 12;
+  }
+  .xl\:us-col-s-1 {
+    grid-column-start: 1;
+  }
+  .xl\:us-col-s-2 {
+    grid-column-start: 2;
+  }
+  .xl\:us-col-s-3 {
+    grid-column-start: 3;
+  }
+  .xl\:us-col-s-4 {
+    grid-column-start: 4;
+  }
+  .xl\:us-col-s-5 {
+    grid-column-start: 5;
+  }
+  .xl\:us-col-s-6 {
+    grid-column-start: 6;
+  }
+  .xl\:us-col-s-7 {
+    grid-column-start: 7;
+  }
+  .xl\:us-col-s-8 {
+    grid-column-start: 8;
+  }
+  .xl\:us-col-s-9 {
+    grid-column-start: 9;
+  }
+  .xl\:us-col-s-10 {
+    grid-column-start: 10;
+  }
+  .xl\:us-col-s-11 {
+    grid-column-start: 11;
+  }
+  .xl\:us-col-s-12 {
+    grid-column-start: 12;
+  }
+  .xl\:us-col-e-1 {
+    grid-column: 1;
+  }
+  .xl\:us-col-e-2 {
+    grid-column: 2;
+  }
+  .xl\:us-col-e-3 {
+    grid-column: 3;
+  }
+  .xl\:us-col-e-4 {
+    grid-column: 4;
+  }
+  .xl\:us-col-e-5 {
+    grid-column: 5;
+  }
+  .xl\:us-col-e-6 {
+    grid-column: 6;
+  }
+  .xl\:us-col-e-7 {
+    grid-column: 7;
+  }
+  .xl\:us-col-e-8 {
+    grid-column: 8;
+  }
+  .xl\:us-col-e-9 {
+    grid-column: 9;
+  }
+  .xl\:us-col-e-10 {
+    grid-column: 10;
+  }
+  .xl\:us-col-e-11 {
+    grid-column: 11;
+  }
+  .xl\:us-col-e-12 {
+    grid-column: 12;
+  }
 }
 .us-clamp-1 {
   overflow: hidden;
@@ -3342,6 +4427,7 @@
   border-color: var(--us-outline-border-color);
   opacity: var(--us-outline-opacity);
   pointer-events: none;
+  z-index: var(--us-outline-z-index);
 }
 
 :not([hidden]):hover > .us-outline {
@@ -3385,6 +4471,10 @@
   border-bottom: var(--us-outline-border-width) solid var(--us-outline-border-color);
 }
 
+.us-grid {
+  display: grid;
+}
+
 /* Estilos CSS aquí */
 .slider-container {
   width: 300px;