@bgord/design 0.28.0 → 0.29.0

package/dist/main.css

@@ -9,17 +9,19 @@
   white-space: nowrap; /* Prevents from multiline text */
   touch-action: manipulation; /* Don't wait for second tap */
 
-  transition: border-radius 300ms, opacity 400ms;
+  transition:
+    border-radius 300ms,
+    opacity 400ms;
 }
 
 /*
   Attributes that are modifiable,
   but common to all variants.
 */
-.c-button[data-variant='primary'],
-.c-button[data-variant='secondary'],
-.c-button[data-variant='bare'],
-.c-button[data-variant='with-icon'] {
+.c-button[data-variant="primary"],
+.c-button[data-variant="secondary"],
+.c-button[data-variant="bare"],
+.c-button[data-variant="with-icon"] {
   font-size: 12px;
   font-weight: 600;
 
@@ -38,7 +40,9 @@
   opacity: 0.75;
   border-radius: 0;
 
-  transition: border-radius 300ms, opacity 400ms;
+  transition:
+    border-radius 300ms,
+    opacity 400ms;
 }
 
 .c-button:active {
@@ -55,25 +59,25 @@
   border-radius: 4px;
 }
 
-.c-button[data-variant='primary'] {
+.c-button[data-variant="primary"] {
   padding: 0 8px;
   background-color: #374151;
   color: #e5e7eb;
   letter-spacing: 0.75px;
 }
-.c-button[data-variant='secondary'] {
+.c-button[data-variant="secondary"] {
   padding: 0 8px;
   background-color: #d1d5db;
   color: #1f2937;
   letter-spacing: 0.5px;
 }
-.c-button[data-variant='bare'],
-.c-button[data-variant='with-icon'] {
+.c-button[data-variant="bare"],
+.c-button[data-variant="with-icon"] {
   background-color: transparent;
   color: #1f2937;
   letter-spacing: 0.5px;
 }
-.c-button[data-variant='with-icon'] {
+.c-button[data-variant="with-icon"] {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -92,10 +96,11 @@
   border: 1px solid #d1d5db;
   border-radius: 4px;
   outline: none;
-  -webkit-appearance: none;
-          appearance: none;
+  appearance: none;
 
-  transition: border-radius 300ms, border-color 400ms;
+  transition:
+    border-radius 300ms,
+    border-color 400ms;
 }
 
 .c-input:hover,
@@ -104,7 +109,9 @@
   border-color: #9ca3af;
   border-radius: 0;
 
-  transition: border-radius 300ms, border-color 400ms;
+  transition:
+    border-radius 300ms,
+    border-color 400ms;
 }
 
 .c-input:disabled {
@@ -136,10 +143,10 @@
   color: #4b5563;
 }
 
-.c-label[data-variant='optional']::after {
+.c-label[data-variant="optional"]::after {
   margin-left: 6px;
   text-transform: lowercase;
-  content: '(optional)';
+  content: "(optional)";
 }
 
 /* ===================== */
@@ -155,7 +162,7 @@
   transition: opacity 300ms;
 }
 
-.c-link[data-variant='bare'] {
+.c-link[data-variant="bare"] {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -163,10 +170,9 @@
 /* ===================== */
 /* Select component */
 
-@supports ((-webkit-appearance: none) or (appearance: none)) {
+@supports (appearance: none) {
   .c-select {
-    -webkit-appearance: none;
-            appearance: none;
+    appearance: none;
     line-height: 24px;
     margin: 0;
     padding: 0 24px 0 6px;
@@ -191,7 +197,7 @@
 
   .c-select-wrapper::after {
     position: absolute;
-    content: '';
+    content: "";
     top: 12px;
     right: 8px;
     height: 8px;
@@ -222,11 +228,10 @@
 /* ===================== */
 /* Checkbox component */
 
-@supports ((-webkit-appearance: none) or (appearance: none)) {
+@supports (appearance: none) {
   .c-checkbox {
     position: relative;
-    -webkit-appearance: none;
-            appearance: none;
+    appearance: none;
     outline: none;
 
     min-height: 24px;
@@ -257,7 +262,7 @@
   .c-checkbox:checked::after,
   .c-checkbox:hover::after {
     position: absolute;
-    content: '';
+    content: "";
 
     top: 6px;
     left: 6px;
@@ -286,11 +291,12 @@
   border: 1px solid #d1d5db;
   border-radius: 4px;
   outline: none;
-  -webkit-appearance: none;
-          appearance: none;
+  appearance: none;
   resize: none;
 
-  transition: border-radius 300ms, border-color 400ms;
+  transition:
+    border-radius 300ms,
+    border-color 400ms;
 }
 
 .c-textarea:hover,
@@ -299,7 +305,9 @@
   border-color: #9ca3af;
   border-radius: 0;
 
-  transition: border-radius 300ms, border-color 400ms;
+  transition:
+    border-radius 300ms,
+    border-color 400ms;
 }
 
 .c-textarea:disabled {
@@ -318,8 +326,7 @@
 /* Button component */
 
 .c-range {
-  -webkit-appearance: none;
-          appearance: none;
+  appearance: none;
   height: 8px;
   border-radius: 8px;
 }
@@ -341,8 +348,7 @@
   width: 14px;
 }
 .c-range::-webkit-slider-thumb {
-  -webkit-appearance: none;
-          appearance: none;
+  appearance: none;
   box-shadow: none;
   border: none;
   border-radius: 50%;
@@ -357,8 +363,7 @@
   border: none;
 }
 .c-range::-webkit-slider-runnable-track {
-  -webkit-appearance: none;
-          appearance: none;
+  appearance: none;
   box-shadow: none;
   border: none;
 }
@@ -368,25 +373,21 @@
   border: none;
 }
 
-.c-range[data-variant='primary'] {
+.c-range[data-variant="primary"] {
   background: #e5e7eb;
 }
-.c-range[data-variant='primary']::-moz-range-thumb {
+.c-range[data-variant="primary"]::-moz-range-thumb {
   background: #4b5563;
 }
-.c-range[data-variant='primary']::-webkit-slider-thumb {
+.c-range[data-variant="primary"]::-webkit-slider-thumb {
   background: #4b5563;
 }
-.c-range[data-variant='primary']::-ms-thumb {
+.c-range[data-variant="primary"]::-ms-thumb {
   background: #4b5563;
 }
 
-.c-range[data-variant='primary'] {
-  background: linear-gradient(
-    to right,
-    #4b5563 var(--percentage),
-    #e5e7eb var(--percentage)
-  );
+.c-range[data-variant="primary"] {
+  background: linear-gradient(to right, #4b5563 var(--percentage), #e5e7eb var(--percentage));
 }
 
 /* ===================== */
@@ -426,8 +427,7 @@
 /* ===================== */
 .c-visually-hidden {
   clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
+  clip-path: inset(50%);
   height: 1px;
   overflow: hidden;
   position: absolute;
@@ -478,42 +478,42 @@
 }
 
 /* ===================== */
-[data-transform='truncate']:not([title]) {
+[data-transform="truncate"]:not([title]) {
   position: relative;
 }
-[data-transform='truncate']:not([title]):after {
+[data-transform="truncate"]:not([title]):after {
   background: red;
   position: absolute;
   inset: 0;
-  content: 'Rule #1 violation (title-truncate)';
+  content: "Rule #1 violation (title-truncate)";
 }
 
-[data-transform='line-clamp']:not([title]) {
+[data-transform="line-clamp"]:not([title]) {
   position: relative;
 }
-[data-transform='line-clamp']:not([title]):after {
+[data-transform="line-clamp"]:not([title]):after {
   background: red;
   position: absolute;
   inset: 0;
-  content: 'Rule #1 violation (title-truncate)';
+  content: "Rule #1 violation (title-truncate)";
 }
-[target='_blank']:not([rel]) {
+[target="_blank"]:not([rel]) {
   position: relative;
 }
 
-[target='_blank']:not([rel]):after {
+[target="_blank"]:not([rel]):after {
   background: red;
   position: absolute;
   inset: 0;
-  content: 'Rule #2 violation (target-blank-referer)';
+  content: "Rule #2 violation (target-blank-referer)";
 }
 img:not([alt]) {
   border: 2px solid red;
-  content: 'Rule #3 violation (image-alt)';
+  content: "Rule #3 violation (image-alt)";
 }
 button:not([title]) > svg {
   border: 2px solid red !important;
-  content: 'Rule #4 violation (button-icon-title)';
+  content: "Rule #4 violation (button-icon-title)";
 }
 ul > *:not(li) {
   position: relative;
@@ -523,577 +523,598 @@ ul > *:not(li):after {
   background: red;
   position: absolute;
   inset: 0;
-  content: 'Rule #5 violation (invalid-list-element)';
+  content: "Rule #5 violation (invalid-list-element)";
 }
-/* Margins */
+/* Z indexes */
 
-*[data-m='0'] {
-  margin: 0;
+*[data-z='0'] {
+  z-index: 0;
 }
-*[data-m='3'] {
-  margin: 3px;
+*[data-z='1'] {
+  z-index: 1;
 }
-*[data-m='6'] {
-  margin: 6px;
+*[data-z='2'] {
+  z-index: 2;
 }
-*[data-m='12'] {
-  margin: 12px;
+*[data-z='3'] {
+  z-index: 3;
 }
-*[data-m='24'] {
-  margin: 24px;
+*[data-z='-1'] {
+  z-index: -1;
 }
-*[data-m='36'] {
-  margin: 36px;
+/* ===================== */
+
+/* Widths */
+
+*[data-width='100%'] {
+  width: 100%;
 }
-*[data-m='48'] {
-  margin: 48px;
+*[data-width='auto'] {
+  width: auto;
 }
-*[data-m='72'] {
-  margin: 72px;
+*[data-width='unset'] {
+  width: unset;
 }
-*[data-m='auto'] {
-  margin: auto;
+@media (max-width: 768px) {
+  *[data-md-width='100%'] {
+    width: 100%;
+  }
+  *[data-md-width='auto'] {
+    width: auto;
+  }
+  *[data-md-width='unset'] {
+    width: unset;
+  }
 }
-*[data-m='unset'] {
-  margin: unset;
+/* ===================== */
+
+/* Transforms */
+
+*[data-transform~='uppercase'] {
+  text-transform: uppercase;
 }
-*[data-mx='0'] {
-  margin-left: 0;
-  margin-right: 0;
+*[data-transform~='lowercase'] {
+  text-transform: lowercase;
 }
-*[data-mx='3'] {
-  margin-left: 3px;
-  margin-right: 3px;
+*[data-transform~='capitalize'] {
+  text-transform: capitalize;
 }
-*[data-mx='6'] {
-  margin-left: 6px;
-  margin-right: 6px;
+*[data-transform~='upper-first']:first-letter {
+  text-transform: uppercase;
 }
-*[data-mx='12'] {
-  margin-left: 12px;
-  margin-right: 12px;
+*[data-transform~='truncate'] {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
-*[data-mx='24'] {
-  margin-left: 24px;
-  margin-right: 24px;
+*[data-transform~='center'] {
+  text-align: center;
 }
-*[data-mx='36'] {
-  margin-left: 36px;
-  margin-right: 36px;
+*[data-transform~='nowrap'] {
+  white-space: nowrap;
 }
-*[data-mx='48'] {
-  margin-left: 48px;
-  margin-right: 48px;
+*[data-transform~='none'] {
+  text-transform: none;
 }
-*[data-mx='72'] {
-  margin-left: 72px;
-  margin-right: 72px;
+*[data-transform~='line-clamp'] {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--lines, 2); overflow: hidden;
 }
-*[data-mx='auto'] {
-  margin-left: auto;
-  margin-right: auto;
+/* ===================== */
+
+/* Shadows */
+
+*[data-shadow='sm'] {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
-*[data-mx='unset'] {
-  margin-left: unset;
-  margin-right: unset;
+*[data-shadow='md'] {
+  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.08);
 }
-*[data-my='0'] {
-  margin-top: 0;
-  margin-bottom: 0;
+*[data-shadow='lg'] {
+  box-shadow: 0 8px 12px 2px rgba(0, 0, 0, 0.06);
 }
-*[data-my='3'] {
-  margin-top: 3px;
-  margin-bottom: 3px;
+/* ===================== */
+
+/* Rotates */
+
+*[data-rotate='0'] {
+  transform: rotate(0deg);
 }
-*[data-my='6'] {
-  margin-top: 6px;
-  margin-bottom: 6px;
+*[data-rotate='90'] {
+  transform: rotate(90deg);
 }
-*[data-my='12'] {
-  margin-top: 12px;
-  margin-bottom: 12px;
+*[data-rotate='180'] {
+  transform: rotate(180deg);
 }
-*[data-my='24'] {
-  margin-top: 24px;
-  margin-bottom: 24px;
+*[data-rotate='270'] {
+  transform: rotate(270deg);
 }
-*[data-my='36'] {
-  margin-top: 36px;
-  margin-bottom: 36px;
+@media (max-width: 768px) {
+  *[data-md-rotate='0'] {
+    transform: rotate(0deg);
+  }
+  *[data-md-rotate='90'] {
+    transform: rotate(90deg);
+  }
+  *[data-md-rotate='180'] {
+    transform: rotate(180deg);
+  }
+  *[data-md-rotate='270'] {
+    transform: rotate(270deg);
+  }
 }
-*[data-my='48'] {
-  margin-top: 48px;
-  margin-bottom: 48px;
+/* ===================== */
+
+/* Positions */
+
+*[data-position='static'] {
+  position: static;
 }
-*[data-my='72'] {
-  margin-top: 72px;
-  margin-bottom: 72px;
+*[data-position='relative'] {
+  position: relative;
 }
-*[data-my='auto'] {
-  margin-top: auto;
-  margin-bottom: auto;
+*[data-position='absolute'] {
+  position: absolute;
 }
-*[data-my='unset'] {
-  margin-top: unset;
-  margin-bottom: unset;
+*[data-position='fixed'] {
+  position: fixed;
 }
-*[data-mt='0'] {
-  margin-top: 0;
+*[data-position='sticky'] {
+  position: sticky;
 }
-*[data-mt='3'] {
-  margin-top: 3px;
+*[data-position='unset'] {
+  position: unset;
 }
-*[data-mt='6'] {
-  margin-top: 6px;
+@media (max-width: 768px) {
+  *[data-md-position='static'] {
+    position: static;
+  }
+  *[data-md-position='relative'] {
+    position: relative;
+  }
+  *[data-md-position='absolute'] {
+    position: absolute;
+  }
+  *[data-md-position='fixed'] {
+    position: fixed;
+  }
+  *[data-md-position='sticky'] {
+    position: sticky;
+  }
+  *[data-md-position='unset'] {
+    position: unset;
+  }
 }
-*[data-mt='12'] {
-  margin-top: 12px;
+/* ===================== */
+
+/* Positioners */
+
+*[data-top='0'] {
+  top: 0;
 }
-*[data-mt='24'] {
-  margin-top: 24px;
+*[data-right='0'] {
+  right: 0;
 }
-*[data-mt='36'] {
-  margin-top: 36px;
+*[data-bottom='0'] {
+  bottom: 0;
 }
-*[data-mt='48'] {
-  margin-top: 48px;
+*[data-left='0'] {
+  left: 0;
 }
-*[data-mt='72'] {
-  margin-top: 72px;
+*[data-inset='0'] {
+  inset: 0;
 }
-*[data-mt='auto'] {
-  margin-top: auto;
+*[data-top='3'] {
+  top: 3px;
 }
-*[data-mt='unset'] {
-  margin-top: unset;
+*[data-right='3'] {
+  right: 3px;
 }
-*[data-mr='0'] {
-  margin-right: 0;
+*[data-bottom='3'] {
+  bottom: 3px;
 }
-*[data-mr='3'] {
-  margin-right: 3px;
+*[data-left='3'] {
+  left: 3px;
 }
-*[data-mr='6'] {
-  margin-right: 6px;
+*[data-inset='3'] {
+  inset: 3px;
 }
-*[data-mr='12'] {
-  margin-right: 12px;
+*[data-top='6'] {
+  top: 6px;
 }
-*[data-mr='24'] {
-  margin-right: 24px;
+*[data-right='6'] {
+  right: 6px;
 }
-*[data-mr='36'] {
-  margin-right: 36px;
+*[data-bottom='6'] {
+  bottom: 6px;
 }
-*[data-mr='48'] {
-  margin-right: 48px;
+*[data-left='6'] {
+  left: 6px;
 }
-*[data-mr='72'] {
-  margin-right: 72px;
+*[data-inset='6'] {
+  inset: 6px;
 }
-*[data-mr='auto'] {
-  margin-right: auto;
+*[data-top='12'] {
+  top: 12px;
 }
-*[data-mr='unset'] {
-  margin-right: unset;
+*[data-right='12'] {
+  right: 12px;
 }
-*[data-mb='0'] {
-  margin-bottom: 0;
+*[data-bottom='12'] {
+  bottom: 12px;
 }
-*[data-mb='3'] {
-  margin-bottom: 3px;
+*[data-left='12'] {
+  left: 12px;
 }
-*[data-mb='6'] {
-  margin-bottom: 6px;
+*[data-inset='12'] {
+  inset: 12px;
 }
-*[data-mb='12'] {
-  margin-bottom: 12px;
+*[data-top='24'] {
+  top: 24px;
 }
-*[data-mb='24'] {
-  margin-bottom: 24px;
+*[data-right='24'] {
+  right: 24px;
 }
-*[data-mb='36'] {
-  margin-bottom: 36px;
+*[data-bottom='24'] {
+  bottom: 24px;
 }
-*[data-mb='48'] {
-  margin-bottom: 48px;
+*[data-left='24'] {
+  left: 24px;
 }
-*[data-mb='72'] {
-  margin-bottom: 72px;
+*[data-inset='24'] {
+  inset: 24px;
 }
-*[data-mb='auto'] {
-  margin-bottom: auto;
+*[data-top='36'] {
+  top: 36px;
 }
-*[data-mb='unset'] {
-  margin-bottom: unset;
+*[data-right='36'] {
+  right: 36px;
 }
-*[data-ml='0'] {
-  margin-left: 0;
+*[data-bottom='36'] {
+  bottom: 36px;
 }
-*[data-ml='3'] {
-  margin-left: 3px;
+*[data-left='36'] {
+  left: 36px;
 }
-*[data-ml='6'] {
-  margin-left: 6px;
+*[data-inset='36'] {
+  inset: 36px;
 }
-*[data-ml='12'] {
-  margin-left: 12px;
+*[data-top='48'] {
+  top: 48px;
 }
-*[data-ml='24'] {
-  margin-left: 24px;
+*[data-right='48'] {
+  right: 48px;
 }
-*[data-ml='36'] {
-  margin-left: 36px;
+*[data-bottom='48'] {
+  bottom: 48px;
 }
-*[data-ml='48'] {
-  margin-left: 48px;
+*[data-left='48'] {
+  left: 48px;
 }
-*[data-ml='72'] {
-  margin-left: 72px;
+*[data-inset='48'] {
+  inset: 48px;
 }
-*[data-ml='auto'] {
-  margin-left: auto;
+*[data-top='72'] {
+  top: 72px;
 }
-*[data-ml='unset'] {
-  margin-left: unset;
+*[data-right='72'] {
+  right: 72px;
+}
+*[data-bottom='72'] {
+  bottom: 72px;
+}
+*[data-left='72'] {
+  left: 72px;
+}
+*[data-inset='72'] {
+  inset: 72px;
+}
+*[data-top='auto'] {
+  top: auto;
+}
+*[data-right='auto'] {
+  right: auto;
+}
+*[data-bottom='auto'] {
+  bottom: auto;
+}
+*[data-left='auto'] {
+  left: auto;
+}
+*[data-inset='auto'] {
+  inset: auto;
+}
+*[data-top='unset'] {
+  top: unset;
+}
+*[data-right='unset'] {
+  right: unset;
+}
+*[data-bottom='unset'] {
+  bottom: unset;
+}
+*[data-left='unset'] {
+  left: unset;
+}
+*[data-inset='unset'] {
+  inset: unset;
 }
 @media (max-width: 768px) {
-  *[data-md-m='0'] {
-    margin: 0;
-  }
-  *[data-md-m='3'] {
-    margin: 3px;
-  }
-  *[data-md-m='6'] {
-    margin: 6px;
-  }
-  *[data-md-m='12'] {
-    margin: 12px;
-  }
-  *[data-md-m='24'] {
-    margin: 24px;
-  }
-  *[data-md-m='36'] {
-    margin: 36px;
-  }
-  *[data-md-m='48'] {
-    margin: 48px;
-  }
-  *[data-md-m='72'] {
-    margin: 72px;
-  }
-  *[data-md-m='auto'] {
-    margin: auto;
-  }
-  *[data-md-m='unset'] {
-    margin: unset;
-  }
-  *[data-md-mx='0'] {
-    margin-left: 0;
-    margin-right: 0;
-  }
-  *[data-md-mx='3'] {
-    margin-left: 3px;
-    margin-right: 3px;
-  }
-  *[data-md-mx='6'] {
-    margin-left: 6px;
-    margin-right: 6px;
-  }
-  *[data-md-mx='12'] {
-    margin-left: 12px;
-    margin-right: 12px;
-  }
-  *[data-md-mx='24'] {
-    margin-left: 24px;
-    margin-right: 24px;
-  }
-  *[data-md-mx='36'] {
-    margin-left: 36px;
-    margin-right: 36px;
-  }
-  *[data-md-mx='48'] {
-    margin-left: 48px;
-    margin-right: 48px;
-  }
-  *[data-md-mx='72'] {
-    margin-left: 72px;
-    margin-right: 72px;
-  }
-  *[data-md-mx='auto'] {
-    margin-left: auto;
-    margin-right: auto;
-  }
-  *[data-md-mx='unset'] {
-    margin-left: unset;
-    margin-right: unset;
-  }
-  *[data-md-my='0'] {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  *[data-md-my='3'] {
-    margin-top: 3px;
-    margin-bottom: 3px;
-  }
-  *[data-md-my='6'] {
-    margin-top: 6px;
-    margin-bottom: 6px;
-  }
-  *[data-md-my='12'] {
-    margin-top: 12px;
-    margin-bottom: 12px;
-  }
-  *[data-md-my='24'] {
-    margin-top: 24px;
-    margin-bottom: 24px;
-  }
-  *[data-md-my='36'] {
-    margin-top: 36px;
-    margin-bottom: 36px;
-  }
-  *[data-md-my='48'] {
-    margin-top: 48px;
-    margin-bottom: 48px;
-  }
-  *[data-md-my='72'] {
-    margin-top: 72px;
-    margin-bottom: 72px;
-  }
-  *[data-md-my='auto'] {
-    margin-top: auto;
-    margin-bottom: auto;
-  }
-  *[data-md-my='unset'] {
-    margin-top: unset;
-    margin-bottom: unset;
-  }
-  *[data-md-mt='0'] {
-    margin-top: 0;
-  }
-  *[data-md-mt='3'] {
-    margin-top: 3px;
-  }
-  *[data-md-mt='6'] {
-    margin-top: 6px;
-  }
-  *[data-md-mt='12'] {
-    margin-top: 12px;
-  }
-  *[data-md-mt='24'] {
-    margin-top: 24px;
-  }
-  *[data-md-mt='36'] {
-    margin-top: 36px;
-  }
-  *[data-md-mt='48'] {
-    margin-top: 48px;
-  }
-  *[data-md-mt='72'] {
-    margin-top: 72px;
-  }
-  *[data-md-mt='auto'] {
-    margin-top: auto;
-  }
-  *[data-md-mt='unset'] {
-    margin-top: unset;
-  }
-  *[data-md-mr='0'] {
-    margin-right: 0;
-  }
-  *[data-md-mr='3'] {
-    margin-right: 3px;
-  }
-  *[data-md-mr='6'] {
-    margin-right: 6px;
-  }
-  *[data-md-mr='12'] {
-    margin-right: 12px;
-  }
-  *[data-md-mr='24'] {
-    margin-right: 24px;
-  }
-  *[data-md-mr='36'] {
-    margin-right: 36px;
-  }
-  *[data-md-mr='48'] {
-    margin-right: 48px;
-  }
-  *[data-md-mr='72'] {
-    margin-right: 72px;
-  }
-  *[data-md-mr='auto'] {
-    margin-right: auto;
-  }
-  *[data-md-mr='unset'] {
-    margin-right: unset;
-  }
-  *[data-md-mb='0'] {
-    margin-bottom: 0;
-  }
-  *[data-md-mb='3'] {
-    margin-bottom: 3px;
-  }
-  *[data-md-mb='6'] {
-    margin-bottom: 6px;
-  }
-  *[data-md-mb='12'] {
-    margin-bottom: 12px;
-  }
-  *[data-md-mb='24'] {
-    margin-bottom: 24px;
-  }
-  *[data-md-mb='36'] {
-    margin-bottom: 36px;
-  }
-  *[data-md-mb='48'] {
-    margin-bottom: 48px;
-  }
-  *[data-md-mb='72'] {
-    margin-bottom: 72px;
-  }
-  *[data-md-mb='auto'] {
-    margin-bottom: auto;
-  }
-  *[data-md-mb='unset'] {
-    margin-bottom: unset;
-  }
-  *[data-md-ml='0'] {
-    margin-left: 0;
-  }
-  *[data-md-ml='3'] {
-    margin-left: 3px;
-  }
-  *[data-md-ml='6'] {
-    margin-left: 6px;
-  }
-  *[data-md-ml='12'] {
-    margin-left: 12px;
-  }
-  *[data-md-ml='24'] {
-    margin-left: 24px;
-  }
-  *[data-md-ml='36'] {
-    margin-left: 36px;
-  }
-  *[data-md-ml='48'] {
-    margin-left: 48px;
-  }
-  *[data-md-ml='72'] {
-    margin-left: 72px;
-  }
-  *[data-md-ml='auto'] {
-    margin-left: auto;
-  }
-  *[data-md-ml='unset'] {
-    margin-left: unset;
-  }
-}
-/* ===================== */
-
-/* Paddings */
-
-*[data-p='0'] {
-  padding: 0;
+*[data-md-top='0'] {
+  top: 0;
 }
-*[data-p='3'] {
-  padding: 3px;
+*[data-md-right='0'] {
+  right: 0;
 }
-*[data-p='6'] {
-  padding: 6px;
+*[data-md-bottom='0'] {
+  bottom: 0;
 }
-*[data-p='12'] {
-  padding: 12px;
+*[data-md-left='0'] {
+  left: 0;
 }
-*[data-p='24'] {
-  padding: 24px;
+*[data-md-inset='0'] {
+  inset: 0;
 }
-*[data-p='36'] {
-  padding: 36px;
+*[data-md-top='3'] {
+  top: 3px;
 }
-*[data-p='48'] {
-  padding: 48px;
+*[data-md-right='3'] {
+  right: 3px;
 }
-*[data-p='72'] {
-  padding: 72px;
+*[data-md-bottom='3'] {
+  bottom: 3px;
 }
-*[data-p='auto'] {
-  padding: auto;
+*[data-md-left='3'] {
+  left: 3px;
 }
-*[data-p='unset'] {
-  padding: unset;
+*[data-md-inset='3'] {
+  inset: 3px;
 }
-*[data-px='0'] {
-  padding-left: 0;
-  padding-right: 0;
+*[data-md-top='6'] {
+  top: 6px;
 }
-*[data-px='3'] {
-  padding-left: 3px;
-  padding-right: 3px;
+*[data-md-right='6'] {
+  right: 6px;
 }
-*[data-px='6'] {
-  padding-left: 6px;
-  padding-right: 6px;
+*[data-md-bottom='6'] {
+  bottom: 6px;
 }
-*[data-px='12'] {
-  padding-left: 12px;
-  padding-right: 12px;
+*[data-md-left='6'] {
+  left: 6px;
 }
-*[data-px='24'] {
-  padding-left: 24px;
-  padding-right: 24px;
+*[data-md-inset='6'] {
+  inset: 6px;
 }
-*[data-px='36'] {
-  padding-left: 36px;
-  padding-right: 36px;
+*[data-md-top='12'] {
+  top: 12px;
 }
-*[data-px='48'] {
-  padding-left: 48px;
-  padding-right: 48px;
+*[data-md-right='12'] {
+  right: 12px;
 }
-*[data-px='72'] {
-  padding-left: 72px;
-  padding-right: 72px;
+*[data-md-bottom='12'] {
+  bottom: 12px;
 }
-*[data-px='auto'] {
-  padding-left: auto;
-  padding-right: auto;
+*[data-md-left='12'] {
+  left: 12px;
 }
-*[data-px='unset'] {
-  padding-left: unset;
-  padding-right: unset;
+*[data-md-inset='12'] {
+  inset: 12px;
 }
-*[data-py='0'] {
-  padding-top: 0;
-  padding-bottom: 0;
+*[data-md-top='24'] {
+  top: 24px;
 }
-*[data-py='3'] {
-  padding-top: 3px;
-  padding-bottom: 3px;
+*[data-md-right='24'] {
+  right: 24px;
 }
-*[data-py='6'] {
-  padding-top: 6px;
-  padding-bottom: 6px;
+*[data-md-bottom='24'] {
+  bottom: 24px;
 }
-*[data-py='12'] {
-  padding-top: 12px;
-  padding-bottom: 12px;
+*[data-md-left='24'] {
+  left: 24px;
 }
-*[data-py='24'] {
-  padding-top: 24px;
-  padding-bottom: 24px;
+*[data-md-inset='24'] {
+  inset: 24px;
 }
-*[data-py='36'] {
-  padding-top: 36px;
-  padding-bottom: 36px;
+*[data-md-top='36'] {
+  top: 36px;
 }
-*[data-py='48'] {
-  padding-top: 48px;
-  padding-bottom: 48px;
+*[data-md-right='36'] {
+  right: 36px;
 }
-*[data-py='72'] {
-  padding-top: 72px;
-  padding-bottom: 72px;
+*[data-md-bottom='36'] {
+  bottom: 36px;
+}
+*[data-md-left='36'] {
+  left: 36px;
+}
+*[data-md-inset='36'] {
+  inset: 36px;
+}
+*[data-md-top='48'] {
+  top: 48px;
+}
+*[data-md-right='48'] {
+  right: 48px;
+}
+*[data-md-bottom='48'] {
+  bottom: 48px;
+}
+*[data-md-left='48'] {
+  left: 48px;
+}
+*[data-md-inset='48'] {
+  inset: 48px;
+}
+*[data-md-top='72'] {
+  top: 72px;
+}
+*[data-md-right='72'] {
+  right: 72px;
+}
+*[data-md-bottom='72'] {
+  bottom: 72px;
+}
+*[data-md-left='72'] {
+  left: 72px;
+}
+*[data-md-inset='72'] {
+  inset: 72px;
+}
+*[data-md-top='auto'] {
+  top: auto;
+}
+*[data-md-right='auto'] {
+  right: auto;
+}
+*[data-md-bottom='auto'] {
+  bottom: auto;
+}
+*[data-md-left='auto'] {
+  left: auto;
+}
+*[data-md-inset='auto'] {
+  inset: auto;
+}
+*[data-md-top='unset'] {
+  top: unset;
+}
+*[data-md-right='unset'] {
+  right: unset;
+}
+*[data-md-bottom='unset'] {
+  bottom: unset;
+}
+*[data-md-left='unset'] {
+  left: unset;
+}
+*[data-md-inset='unset'] {
+  inset: unset;
+}
+}
+/* ===================== */
+
+/* Pointer events */
+
+*[data-pointer-events='none'] {
+  pointer-events: none;
+}
+*[data-pointer-events='auto'] {
+  pointer-events: auto;
+}
+@media (max-width: 768px) {
+  *[data-md-pointer-events='none'] {
+    pointer-events: none;
+  }
+  *[data-md-pointer-events='auto'] {
+    pointer-events: auto;
+  }
+}
+/* ===================== */
+
+/* Paddings */
+
+*[data-p='0'] {
+  padding: 0;
+}
+*[data-p='3'] {
+  padding: 3px;
+}
+*[data-p='6'] {
+  padding: 6px;
+}
+*[data-p='12'] {
+  padding: 12px;
+}
+*[data-p='24'] {
+  padding: 24px;
+}
+*[data-p='36'] {
+  padding: 36px;
+}
+*[data-p='48'] {
+  padding: 48px;
+}
+*[data-p='72'] {
+  padding: 72px;
+}
+*[data-p='auto'] {
+  padding: auto;
+}
+*[data-p='unset'] {
+  padding: unset;
+}
+*[data-px='0'] {
+  padding-left: 0;
+  padding-right: 0;
+}
+*[data-px='3'] {
+  padding-left: 3px;
+  padding-right: 3px;
+}
+*[data-px='6'] {
+  padding-left: 6px;
+  padding-right: 6px;
+}
+*[data-px='12'] {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+*[data-px='24'] {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+*[data-px='36'] {
+  padding-left: 36px;
+  padding-right: 36px;
+}
+*[data-px='48'] {
+  padding-left: 48px;
+  padding-right: 48px;
+}
+*[data-px='72'] {
+  padding-left: 72px;
+  padding-right: 72px;
+}
+*[data-px='auto'] {
+  padding-left: auto;
+  padding-right: auto;
+}
+*[data-px='unset'] {
+  padding-left: unset;
+  padding-right: unset;
+}
+*[data-py='0'] {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+*[data-py='3'] {
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+*[data-py='6'] {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+*[data-py='12'] {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+*[data-py='24'] {
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+*[data-py='36'] {
+  padding-top: 36px;
+  padding-bottom: 36px;
+}
+*[data-py='48'] {
+  padding-top: 48px;
+  padding-bottom: 48px;
+}
+*[data-py='72'] {
+  padding-top: 72px;
+  padding-bottom: 72px;
 }
 *[data-py='auto'] {
   padding-top: auto;
@@ -1457,575 +1478,629 @@ ul > *:not(li):after {
 }
 /* ===================== */
 
-/* Displays */
+/* Overflows */
 
-*[data-display='flex'] {
-  display: flex;
-flex-wrap: wrap;
-}
-*[data-display='block'] {
-  display: block;
-}
-*[data-display='inline-block'] {
-  display: inline-block;
-}
-*[data-display='none'] {
-  display: none;
-}
-@media (max-width: 768px) {
-*[data-md-display='flex'] {
-  display: flex;
-flex-wrap: wrap;
-}
-*[data-md-display='block'] {
-  display: block;
-}
-*[data-md-display='inline-block'] {
-  display: inline-block;
+*[data-overflow='auto'] {
+  overflow: auto;
 }
-*[data-md-display='none'] {
-  display: none;
+*[data-overflow='scroll'] {
+  overflow: scroll;
 }
+*[data-overflow='hidden'] {
+  overflow: hidden;
 }
 /* ===================== */
 
-/* Axis placements */
+/* Object positions */
 
-*[data-main='start'] {
-  justify-content: flex-start;
+*[data-object-position='top'] {
+  object-position: top;
 }
-*[data-main='end'] {
-  justify-content: flex-end;
+*[data-object-position='bottom'] {
+  object-position: bottom;
 }
-*[data-main='around'] {
-  justify-content: space-around;
+*[data-object-position='left'] {
+  object-position: left;
 }
-*[data-main='evenly'] {
-  justify-content: space-evenly;
+*[data-object-position='right'] {
+  object-position: right;
 }
-*[data-main='between'] {
-  justify-content: space-between;
+*[data-object-position='center'] {
+  object-position: center;
 }
-*[data-main='center'] {
-  justify-content: center;
+*[data-object-position='top-left'] {
+  object-position: top left;
 }
-*[data-main='baseline'] {
-  justify-content: baseline;
+*[data-object-position='top-right'] {
+  object-position: top right;
+}
+@media (max-width: 768px) {
+  *[data-md-object-position='top'] {
+    object-position: top;
+  }
+  *[data-md-object-position='bottom'] {
+    object-position: bottom;
+  }
+  *[data-md-object-position='left'] {
+    object-position: left;
+  }
+  *[data-md-object-position='right'] {
+    object-position: right;
+  }
+  *[data-md-object-position='center'] {
+    object-position: center;
+  }
+  *[data-md-object-position='top-left'] {
+    object-position: top left;
+  }
+  *[data-md-object-position='top-right'] {
+    object-position: top right;
+  }
+}
+/* ===================== */
+
+/* Object fits */
+
+*[data-object-fit='contain'] {
+  object-fit: contain;
+}
+*[data-object-fit='cover'] {
+  object-fit: cover;
+}
+*[data-object-fit='fill'] {
+  object-fit: fill;
+}
+*[data-object-fit='scale-down'] {
+  object-fit: scale-down;
+}
+*[data-object-fit='none'] {
+  object-fit: none;
+}
+@media (max-width: 768px) {
+  *[data-md-object-fit='contain'] {
+    object-fit: contain;
+  }
+  *[data-md-object-fit='cover'] {
+    object-fit: cover;
+  }
+  *[data-md-object-fit='fill'] {
+    object-fit: fill;
+  }
+  *[data-md-object-fit='scale-down'] {
+    object-fit: scale-down;
+  }
+  *[data-md-object-fit='none'] {
+    object-fit: none;
+  }
+}
+/* ===================== */
+
+/* Max widths */
+
+*[data-max-width='320'] {
+  max-width: 320px;
+}
+*[data-max-width='528'] {
+  max-width: 528px;
+}
+*[data-max-width='768'] {
+  max-width: 768px;
+}
+*[data-max-width='1296'] {
+  max-width: 1296px;
+}
+*[data-max-width='100%'] {
+  max-width: 100%;
+}
+*[data-max-width='unset'] {
+  max-width: unset;
+}
+@media (max-width: 768px) {
+*[data-md-max-width='320'] {
+  max-width: 320px;
+}
+*[data-md-max-width='528'] {
+  max-width: 528px;
+}
+*[data-md-max-width='768'] {
+  max-width: 768px;
+}
+*[data-md-max-width='1296'] {
+  max-width: 1296px;
+}
+*[data-md-max-width='100%'] {
+  max-width: 100%;
+}
+*[data-md-max-width='unset'] {
+  max-width: unset;
+}
+}
+/* ===================== */
+
+/* Max heights */
+
+*[data-max-height='100%'] {
+  max-height: 100%;
+}
+*[data-max-height='unset'] {
+  max-height: unset;
+}
+@media (max-width: 768px) {
+*[data-md-max-height='100%'] {
+  max-height: 100%;
+}
+*[data-md-max-height='unset'] {
+  max-height: unset;
+}
+}
+/* ===================== */
+
+/* Margins */
+
+*[data-m='0'] {
+  margin: 0;
+}
+*[data-m='3'] {
+  margin: 3px;
+}
+*[data-m='6'] {
+  margin: 6px;
+}
+*[data-m='12'] {
+  margin: 12px;
+}
+*[data-m='24'] {
+  margin: 24px;
+}
+*[data-m='36'] {
+  margin: 36px;
+}
+*[data-m='48'] {
+  margin: 48px;
+}
+*[data-m='72'] {
+  margin: 72px;
+}
+*[data-m='auto'] {
+  margin: auto;
+}
+*[data-m='unset'] {
+  margin: unset;
+}
+*[data-mx='0'] {
+  margin-left: 0;
+  margin-right: 0;
+}
+*[data-mx='3'] {
+  margin-left: 3px;
+  margin-right: 3px;
+}
+*[data-mx='6'] {
+  margin-left: 6px;
+  margin-right: 6px;
+}
+*[data-mx='12'] {
+  margin-left: 12px;
+  margin-right: 12px;
+}
+*[data-mx='24'] {
+  margin-left: 24px;
+  margin-right: 24px;
+}
+*[data-mx='36'] {
+  margin-left: 36px;
+  margin-right: 36px;
+}
+*[data-mx='48'] {
+  margin-left: 48px;
+  margin-right: 48px;
+}
+*[data-mx='72'] {
+  margin-left: 72px;
+  margin-right: 72px;
+}
+*[data-mx='auto'] {
+  margin-left: auto;
+  margin-right: auto;
+}
+*[data-mx='unset'] {
+  margin-left: unset;
+  margin-right: unset;
+}
+*[data-my='0'] {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+*[data-my='3'] {
+  margin-top: 3px;
+  margin-bottom: 3px;
+}
+*[data-my='6'] {
+  margin-top: 6px;
+  margin-bottom: 6px;
+}
+*[data-my='12'] {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+*[data-my='24'] {
+  margin-top: 24px;
+  margin-bottom: 24px;
+}
+*[data-my='36'] {
+  margin-top: 36px;
+  margin-bottom: 36px;
+}
+*[data-my='48'] {
+  margin-top: 48px;
+  margin-bottom: 48px;
+}
+*[data-my='72'] {
+  margin-top: 72px;
+  margin-bottom: 72px;
+}
+*[data-my='auto'] {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+*[data-my='unset'] {
+  margin-top: unset;
+  margin-bottom: unset;
+}
+*[data-mt='0'] {
+  margin-top: 0;
+}
+*[data-mt='3'] {
+  margin-top: 3px;
+}
+*[data-mt='6'] {
+  margin-top: 6px;
+}
+*[data-mt='12'] {
+  margin-top: 12px;
+}
+*[data-mt='24'] {
+  margin-top: 24px;
+}
+*[data-mt='36'] {
+  margin-top: 36px;
+}
+*[data-mt='48'] {
+  margin-top: 48px;
+}
+*[data-mt='72'] {
+  margin-top: 72px;
+}
+*[data-mt='auto'] {
+  margin-top: auto;
+}
+*[data-mt='unset'] {
+  margin-top: unset;
+}
+*[data-mr='0'] {
+  margin-right: 0;
+}
+*[data-mr='3'] {
+  margin-right: 3px;
+}
+*[data-mr='6'] {
+  margin-right: 6px;
+}
+*[data-mr='12'] {
+  margin-right: 12px;
+}
+*[data-mr='24'] {
+  margin-right: 24px;
+}
+*[data-mr='36'] {
+  margin-right: 36px;
+}
+*[data-mr='48'] {
+  margin-right: 48px;
+}
+*[data-mr='72'] {
+  margin-right: 72px;
+}
+*[data-mr='auto'] {
+  margin-right: auto;
+}
+*[data-mr='unset'] {
+  margin-right: unset;
+}
+*[data-mb='0'] {
+  margin-bottom: 0;
+}
+*[data-mb='3'] {
+  margin-bottom: 3px;
+}
+*[data-mb='6'] {
+  margin-bottom: 6px;
+}
+*[data-mb='12'] {
+  margin-bottom: 12px;
+}
+*[data-mb='24'] {
+  margin-bottom: 24px;
+}
+*[data-mb='36'] {
+  margin-bottom: 36px;
+}
+*[data-mb='48'] {
+  margin-bottom: 48px;
+}
+*[data-mb='72'] {
+  margin-bottom: 72px;
+}
+*[data-mb='auto'] {
+  margin-bottom: auto;
 }
-*[data-cross='start'] {
-  align-items: flex-start;
+*[data-mb='unset'] {
+  margin-bottom: unset;
 }
-*[data-cross='end'] {
-  align-items: flex-end;
+*[data-ml='0'] {
+  margin-left: 0;
 }
-*[data-cross='around'] {
-  align-items: space-around;
+*[data-ml='3'] {
+  margin-left: 3px;
 }
-*[data-cross='evenly'] {
-  align-items: space-evenly;
+*[data-ml='6'] {
+  margin-left: 6px;
 }
-*[data-cross='between'] {
-  align-items: space-between;
+*[data-ml='12'] {
+  margin-left: 12px;
 }
-*[data-cross='center'] {
-  align-items: center;
+*[data-ml='24'] {
+  margin-left: 24px;
 }
-*[data-cross='baseline'] {
-  align-items: baseline;
+*[data-ml='36'] {
+  margin-left: 36px;
 }
-*[data-self='start'] {
-  align-self: flex-start;
+*[data-ml='48'] {
+  margin-left: 48px;
 }
-*[data-self='end'] {
-  align-self: flex-end;
+*[data-ml='72'] {
+  margin-left: 72px;
 }
-*[data-self='center'] {
-  align-self: center;
+*[data-ml='auto'] {
+  margin-left: auto;
 }
-*[data-self='baseline'] {
-  align-self: baseline;
+*[data-ml='unset'] {
+  margin-left: unset;
 }
 @media (max-width: 768px) {
-  *[data-md-main='start'] {
-    justify-content: flex-start;
+  *[data-md-m='0'] {
+    margin: 0;
   }
-  *[data-md-main='end'] {
-    justify-content: flex-end;
+  *[data-md-m='3'] {
+    margin: 3px;
   }
-  *[data-md-main='around'] {
-    justify-content: space-around;
+  *[data-md-m='6'] {
+    margin: 6px;
   }
-  *[data-md-main='evenly'] {
-    justify-content: space-evenly;
+  *[data-md-m='12'] {
+    margin: 12px;
   }
-  *[data-md-main='between'] {
-    justify-content: space-between;
+  *[data-md-m='24'] {
+    margin: 24px;
   }
-  *[data-md-main='center'] {
-    justify-content: center;
+  *[data-md-m='36'] {
+    margin: 36px;
   }
-  *[data-md-main='baseline'] {
-    justify-content: baseline;
+  *[data-md-m='48'] {
+    margin: 48px;
   }
-  *[data-md-cross='start'] {
-    align-items: flex-start;
+  *[data-md-m='72'] {
+    margin: 72px;
   }
-  *[data-md-cross='end'] {
-    align-items: flex-end;
+  *[data-md-m='auto'] {
+    margin: auto;
   }
-  *[data-md-cross='around'] {
-    align-items: space-around;
+  *[data-md-m='unset'] {
+    margin: unset;
   }
-  *[data-md-cross='evenly'] {
-    align-items: space-evenly;
+  *[data-md-mx='0'] {
+    margin-left: 0;
+    margin-right: 0;
   }
-  *[data-md-cross='between'] {
-    align-items: space-between;
+  *[data-md-mx='3'] {
+    margin-left: 3px;
+    margin-right: 3px;
   }
-  *[data-md-cross='center'] {
-    align-items: center;
+  *[data-md-mx='6'] {
+    margin-left: 6px;
+    margin-right: 6px;
   }
-  *[data-md-cross='baseline'] {
-    align-items: baseline;
+  *[data-md-mx='12'] {
+    margin-left: 12px;
+    margin-right: 12px;
   }
-  *[data-md-self='start'] {
-    align-self: flex-start;
+  *[data-md-mx='24'] {
+    margin-left: 24px;
+    margin-right: 24px;
   }
-  *[data-md-self='end'] {
-    align-self: flex-end;
+  *[data-md-mx='36'] {
+    margin-left: 36px;
+    margin-right: 36px;
   }
-  *[data-md-self='center'] {
-    align-self: center;
+  *[data-md-mx='48'] {
+    margin-left: 48px;
+    margin-right: 48px;
   }
-  *[data-md-self='baseline'] {
-    align-self: baseline;
+  *[data-md-mx='72'] {
+    margin-left: 72px;
+    margin-right: 72px;
   }
-}
-/* ===================== */
-
-/* Flex wraps */
-
-*[data-wrap='nowrap'] {
-  flex-wrap: nowrap;
-}
-*[data-wrap='wrap'] {
-  flex-wrap: wrap;
-}
-*[data-wrap='wrap-reverse'] {
-  flex-wrap: wrap-reverse;
-}
-*[data-wrap='unset'] {
-  flex-wrap: unset;
-}
-@media (max-width: 768px) {
-  *[data-md-wrap='nowrap'] {
-    flex-wrap: nowrap;
+  *[data-md-mx='auto'] {
+    margin-left: auto;
+    margin-right: auto;
   }
-  *[data-md-wrap='wrap'] {
-    flex-wrap: wrap;
+  *[data-md-mx='unset'] {
+    margin-left: unset;
+    margin-right: unset;
   }
-  *[data-md-wrap='wrap-reverse'] {
-    flex-wrap: wrap-reverse;
+  *[data-md-my='0'] {
+    margin-top: 0;
+    margin-bottom: 0;
   }
-  *[data-md-wrap='unset'] {
-    flex-wrap: unset;
+  *[data-md-my='3'] {
+    margin-top: 3px;
+    margin-bottom: 3px;
   }
-}
-/* ===================== */
-
-/* Flex directions */
-
-*[data-direction='row'] {
-  flex-direction: row;
-}
-*[data-direction='row-reverse'] {
-  flex-direction: row-reverse;
-}
-*[data-direction='column'] {
-  flex-direction: column;
-}
-*[data-direction='column-reverse'] {
-  flex-direction: column-reverse;
-}
-@media (max-width: 768px) {
-  *[data-md-direction='row'] {
-    flex-direction: row;
+  *[data-md-my='6'] {
+    margin-top: 6px;
+    margin-bottom: 6px;
   }
-  *[data-md-direction='row-reverse'] {
-    flex-direction: row-reverse;
+  *[data-md-my='12'] {
+    margin-top: 12px;
+    margin-bottom: 12px;
   }
-  *[data-md-direction='column'] {
-    flex-direction: column;
+  *[data-md-my='24'] {
+    margin-top: 24px;
+    margin-bottom: 24px;
   }
-  *[data-md-direction='column-reverse'] {
-    flex-direction: column-reverse;
+  *[data-md-my='36'] {
+    margin-top: 36px;
+    margin-bottom: 36px;
   }
-}
-/* ===================== */
-
-/* Flex grows */
-
-*[data-grow='1'] {
-  flex-grow: 1;
-}
-*[data-grow='unset'] {
-  flex-grow: unset;
-}
-@media (max-width: 768px) {
-  *[data-md-grow='1'] {
-    flex-grow: 1;
+  *[data-md-my='48'] {
+    margin-top: 48px;
+    margin-bottom: 48px;
+  }
+  *[data-md-my='72'] {
+    margin-top: 72px;
+    margin-bottom: 72px;
+  }
+  *[data-md-my='auto'] {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  *[data-md-my='unset'] {
+    margin-top: unset;
+    margin-bottom: unset;
+  }
+  *[data-md-mt='0'] {
+    margin-top: 0;
+  }
+  *[data-md-mt='3'] {
+    margin-top: 3px;
+  }
+  *[data-md-mt='6'] {
+    margin-top: 6px;
+  }
+  *[data-md-mt='12'] {
+    margin-top: 12px;
+  }
+  *[data-md-mt='24'] {
+    margin-top: 24px;
+  }
+  *[data-md-mt='36'] {
+    margin-top: 36px;
+  }
+  *[data-md-mt='48'] {
+    margin-top: 48px;
+  }
+  *[data-md-mt='72'] {
+    margin-top: 72px;
+  }
+  *[data-md-mt='auto'] {
+    margin-top: auto;
   }
-  *[data-md-grow='unset'] {
-    flex-grow: unset;
+  *[data-md-mt='unset'] {
+    margin-top: unset;
   }
-}
-/* ===================== */
-
-/* Flex shrinks */
-
-*[data-shrink='0'] {
-  flex-shrink: 0;
-}
-*[data-shrink='unset'] {
-  flex-shrink: unset;
-}
-@media (max-width: 768px) {
-  *[data-md-shrink='0'] {
-    flex-shrink: 0;
+  *[data-md-mr='0'] {
+    margin-right: 0;
   }
-  *[data-md-shrink='unset'] {
-    flex-shrink: unset;
+  *[data-md-mr='3'] {
+    margin-right: 3px;
   }
-}
-/* ===================== */
-
-/* Gaps */
-
-*[data-gap='0'] {
-  gap: 0;
-}
-*[data-gap='3'] {
-  gap: 3px;
-}
-*[data-gap='6'] {
-  gap: 6px;
-}
-*[data-gap='12'] {
-  gap: 12px;
-}
-*[data-gap='24'] {
-  gap: 24px;
-}
-*[data-gap='36'] {
-  gap: 36px;
-}
-*[data-gap='48'] {
-  gap: 48px;
-}
-*[data-gap='72'] {
-  gap: 72px;
-}
-*[data-gap='auto'] {
-  gap: auto;
-}
-*[data-gap='unset'] {
-  gap: unset;
-}
-@media (max-width: 768px) {
-  *[data-md-gap='0'] {
-    gap: 0;
+  *[data-md-mr='6'] {
+    margin-right: 6px;
   }
-  *[data-md-gap='3'] {
-    gap: 3px;
+  *[data-md-mr='12'] {
+    margin-right: 12px;
   }
-  *[data-md-gap='6'] {
-    gap: 6px;
+  *[data-md-mr='24'] {
+    margin-right: 24px;
   }
-  *[data-md-gap='12'] {
-    gap: 12px;
+  *[data-md-mr='36'] {
+    margin-right: 36px;
   }
-  *[data-md-gap='24'] {
-    gap: 24px;
+  *[data-md-mr='48'] {
+    margin-right: 48px;
   }
-  *[data-md-gap='36'] {
-    gap: 36px;
+  *[data-md-mr='72'] {
+    margin-right: 72px;
   }
-  *[data-md-gap='48'] {
-    gap: 48px;
+  *[data-md-mr='auto'] {
+    margin-right: auto;
   }
-  *[data-md-gap='72'] {
-    gap: 72px;
+  *[data-md-mr='unset'] {
+    margin-right: unset;
   }
-  *[data-md-gap='auto'] {
-    gap: auto;
+  *[data-md-mb='0'] {
+    margin-bottom: 0;
   }
-  *[data-md-gap='unset'] {
-    gap: unset;
+  *[data-md-mb='3'] {
+    margin-bottom: 3px;
   }
-}
-/* ===================== */
-
-/* Widths */
-
-*[data-width='100%'] {
-  width: 100%;
-}
-*[data-width='auto'] {
-  width: auto;
-}
-*[data-width='unset'] {
-  width: unset;
-}
-@media (max-width: 768px) {
-  *[data-md-width='100%'] {
-    width: 100%;
+  *[data-md-mb='6'] {
+    margin-bottom: 6px;
   }
-  *[data-md-width='auto'] {
-    width: auto;
+  *[data-md-mb='12'] {
+    margin-bottom: 12px;
   }
-  *[data-md-width='unset'] {
-    width: unset;
+  *[data-md-mb='24'] {
+    margin-bottom: 24px;
   }
-}
-/* ===================== */
-
-/* Positions */
-
-*[data-position='static'] {
-  position: static;
-}
-*[data-position='relative'] {
-  position: relative;
-}
-*[data-position='absolute'] {
-  position: absolute;
-}
-*[data-position='fixed'] {
-  position: fixed;
-}
-*[data-position='sticky'] {
-  position: sticky;
-}
-*[data-position='unset'] {
-  position: unset;
-}
-@media (max-width: 768px) {
-  *[data-md-position='static'] {
-    position: static;
+  *[data-md-mb='36'] {
+    margin-bottom: 36px;
   }
-  *[data-md-position='relative'] {
-    position: relative;
+  *[data-md-mb='48'] {
+    margin-bottom: 48px;
   }
-  *[data-md-position='absolute'] {
-    position: absolute;
+  *[data-md-mb='72'] {
+    margin-bottom: 72px;
   }
-  *[data-md-position='fixed'] {
-    position: fixed;
+  *[data-md-mb='auto'] {
+    margin-bottom: auto;
   }
-  *[data-md-position='sticky'] {
-    position: sticky;
+  *[data-md-mb='unset'] {
+    margin-bottom: unset;
   }
-  *[data-md-position='unset'] {
-    position: unset;
+  *[data-md-ml='0'] {
+    margin-left: 0;
   }
-}
-/* ===================== */
-
-/* Z indexes */
-
-*[data-z='0'] {
-  z-index: 0;
-}
-*[data-z='1'] {
-  z-index: 1;
-}
-*[data-z='2'] {
-  z-index: 2;
-}
-*[data-z='3'] {
-  z-index: 3;
-}
-*[data-z='-1'] {
-  z-index: -1;
-}
-/* ===================== */
-
-/* Font sizes */
-
-*[data-fs='12'] {
-  font-size: 12px;
-}
-*[data-fs='14'] {
-  font-size: 14px;
-}
-*[data-fs='16'] {
-  font-size: 16px;
-}
-*[data-fs='20'] {
-  font-size: 20px;
-}
-*[data-fs='24'] {
-  font-size: 24px;
-}
-*[data-fs='32'] {
-  font-size: 32px;
-}
-*[data-fs='36'] {
-  font-size: 36px;
-}
-@media (max-width: 768px) {
-  *[data-md-fs='12'] {
-    font-size: 12px;
+  *[data-md-ml='3'] {
+    margin-left: 3px;
   }
-  *[data-md-fs='14'] {
-    font-size: 14px;
+  *[data-md-ml='6'] {
+    margin-left: 6px;
   }
-  *[data-md-fs='16'] {
-    font-size: 16px;
+  *[data-md-ml='12'] {
+    margin-left: 12px;
   }
-  *[data-md-fs='20'] {
-    font-size: 20px;
+  *[data-md-ml='24'] {
+    margin-left: 24px;
   }
-  *[data-md-fs='24'] {
-    font-size: 24px;
+  *[data-md-ml='36'] {
+    margin-left: 36px;
   }
-  *[data-md-fs='32'] {
-    font-size: 32px;
+  *[data-md-ml='48'] {
+    margin-left: 48px;
   }
-  *[data-md-fs='36'] {
-    font-size: 36px;
+  *[data-md-ml='72'] {
+    margin-left: 72px;
+  }
+  *[data-md-ml='auto'] {
+    margin-left: auto;
+  }
+  *[data-md-ml='unset'] {
+    margin-left: unset;
   }
 }
 /* ===================== */
 
-/* Font weights */
-
-*[data-fw='300'] {
-  font-weight: 300;
-}
-*[data-fw='400'] {
-  font-weight: 400;
-}
-*[data-fw='500'] {
-  font-weight: 500;
-}
-*[data-fw='700'] {
-  font-weight: 700;
-}
-*[data-fw='900'] {
-  font-weight: 900;
-}
-*[data-fw='unset'] {
-  font-weight: unset;
-}
-/* ===================== */
-
-/* Font colors */
-
-*[data-color='white'] {
-  color: #F9FAFB;
-}
-*[data-color='gray-100'] {
-  color: #F3F4F6;
-}
-*[data-color='gray-200'] {
-  color: #E5E7EB;
-}
-*[data-color='gray-300'] {
-  color: #D1D5DB;
-}
-*[data-color='gray-400'] {
-  color: #9CA3AF;
-}
-*[data-color='gray-500'] {
-  color: #6B7280;
-}
-*[data-color='gray-600'] {
-  color: #4B5563;
-}
-*[data-color='gray-700'] {
-  color: #374151;
-}
-*[data-color='gray-800'] {
-  color: #1F2937;
-}
-*[data-color='black'] {
-  color: #111827;
-}
-*[data-color='green-100'] {
-  color: hsl(112, 50%, 85%);
-}
-*[data-color='green-200'] {
-  color: hsl(112, 50%, 75%);
-}
-*[data-color='green-300'] {
-  color: hsl(112, 50%, 65%);
-}
-*[data-color='green-400'] {
-  color: hsl(112, 50%, 55%);
-}
-*[data-color='green-500'] {
-  color: hsl(112, 50%, 45%);
-}
-*[data-color='green-600'] {
-  color: hsl(112, 50%, 35%);
-}
-*[data-color='green-700'] {
-  color: hsl(112, 50%, 25%);
-}
-*[data-color='green-800'] {
-  color: hsl(112, 50%, 20%);
-}
-*[data-color='red-100'] {
-  color: hsl(5, 80%, 90%);
-}
-*[data-color='red-200'] {
-  color: hsl(5, 80%, 83%);
-}
-*[data-color='red-300'] {
-  color: hsl(5, 80%, 72.5%);
-}
-*[data-color='red-400'] {
-  color: hsl(5, 80%, 62.5%);
-}
-*[data-color='red-500'] {
-  color: hsl(5, 80%, 52.5%);
-}
-*[data-color='red-600'] {
-  color: hsl(5, 80%, 42%);
-}
-*[data-color='red-700'] {
-  color: hsl(5, 80%, 32.5%);
-}
-*[data-color='red-800'] {
-  color: hsl(5, 80%, 22.5%);
-}
-*[data-color='orange-100'] {
-  color: hsl(25, 88%, 85%);
-}
-*[data-color='orange-200'] {
-  color: hsl(25, 88%, 75%);
-}
-*[data-color='orange-300'] {
-  color: hsl(25, 88%, 65%);
-}
-*[data-color='orange-400'] {
-  color: hsl(25, 88%, 55%);
-}
-*[data-color='orange-500'] {
-  color: hsl(25, 88%, 45%);
-}
-*[data-color='orange-600'] {
-  color: hsl(25, 88%, 37.5%);
-}
-*[data-color='orange-700'] {
-  color: hsl(25, 88%, 27.5%);
-}
-*[data-color='orange-800'] {
-  color: hsl(25, 88%, 20%);
-}
-/* ===================== */
-
 /* Line heights */
 
 *[data-lh='12'] {
@@ -2056,697 +2131,563 @@ flex-wrap: wrap;
 *[data-ls='1'] {
   letter-spacing: 1px;
 }
-*[data-ls='2'] {
-  letter-spacing: 2px;
-}
-*[data-ls='4'] {
-  letter-spacing: 4px;
-}
-*[data-ls='6'] {
-  letter-spacing: 6px;
-}
-*[data-ls='0.5'] {
-  letter-spacing: 0.5px;
-}
-*[data-ls='1.5'] {
-  letter-spacing: 1.5px;
-}
-/* ===================== */
-
-/* Backgrounds */
-
-*[data-bg='white'] {
-  background-color: #F9FAFB;
-}
-*[data-bg='gray-100'] {
-  background-color: #F3F4F6;
-}
-*[data-bg='gray-200'] {
-  background-color: #E5E7EB;
-}
-*[data-bg='gray-300'] {
-  background-color: #D1D5DB;
-}
-*[data-bg='gray-400'] {
-  background-color: #9CA3AF;
-}
-*[data-bg='gray-500'] {
-  background-color: #6B7280;
-}
-*[data-bg='gray-600'] {
-  background-color: #4B5563;
-}
-*[data-bg='gray-700'] {
-  background-color: #374151;
-}
-*[data-bg='gray-800'] {
-  background-color: #1F2937;
-}
-*[data-bg='black'] {
-  background-color: #111827;
-}
-*[data-bg='green-100'] {
-  background-color: hsl(112, 50%, 85%);
-}
-*[data-bg='green-200'] {
-  background-color: hsl(112, 50%, 75%);
-}
-*[data-bg='green-300'] {
-  background-color: hsl(112, 50%, 65%);
-}
-*[data-bg='green-400'] {
-  background-color: hsl(112, 50%, 55%);
-}
-*[data-bg='green-500'] {
-  background-color: hsl(112, 50%, 45%);
-}
-*[data-bg='green-600'] {
-  background-color: hsl(112, 50%, 35%);
-}
-*[data-bg='green-700'] {
-  background-color: hsl(112, 50%, 25%);
-}
-*[data-bg='green-800'] {
-  background-color: hsl(112, 50%, 20%);
-}
-*[data-bg='red-100'] {
-  background-color: hsl(5, 80%, 90%);
-}
-*[data-bg='red-200'] {
-  background-color: hsl(5, 80%, 83%);
-}
-*[data-bg='red-300'] {
-  background-color: hsl(5, 80%, 72.5%);
-}
-*[data-bg='red-400'] {
-  background-color: hsl(5, 80%, 62.5%);
-}
-*[data-bg='red-500'] {
-  background-color: hsl(5, 80%, 52.5%);
-}
-*[data-bg='red-600'] {
-  background-color: hsl(5, 80%, 42%);
-}
-*[data-bg='red-700'] {
-  background-color: hsl(5, 80%, 32.5%);
-}
-*[data-bg='red-800'] {
-  background-color: hsl(5, 80%, 22.5%);
-}
-*[data-bg='orange-100'] {
-  background-color: hsl(25, 88%, 85%);
-}
-*[data-bg='orange-200'] {
-  background-color: hsl(25, 88%, 75%);
-}
-*[data-bg='orange-300'] {
-  background-color: hsl(25, 88%, 65%);
-}
-*[data-bg='orange-400'] {
-  background-color: hsl(25, 88%, 55%);
-}
-*[data-bg='orange-500'] {
-  background-color: hsl(25, 88%, 45%);
-}
-*[data-bg='orange-600'] {
-  background-color: hsl(25, 88%, 37.5%);
-}
-*[data-bg='orange-700'] {
-  background-color: hsl(25, 88%, 27.5%);
-}
-*[data-bg='orange-800'] {
-  background-color: hsl(25, 88%, 20%);
-}
-/* ===================== */
-
-/* Border widths */
-
-*[data-bw='1'] {
-  border-width: 1px;
-}
-*[data-bw='2'] {
-  border-width: 2px;
+*[data-ls='2'] {
+  letter-spacing: 2px;
 }
-*[data-bw='4'] {
-  border-width: 4px;
+*[data-ls='4'] {
+  letter-spacing: 4px;
 }
-*[data-bw='6'] {
-  border-width: 6px;
+*[data-ls='6'] {
+  letter-spacing: 6px;
 }
-*[data-bw='12'] {
-  border-width: 12px;
+*[data-ls='0.5'] {
+  letter-spacing: 0.5px;
 }
-*[data-bwx='1'] {
-  border-left-width: 1px;
-  border-right-width: 1px;
+*[data-ls='1.5'] {
+  letter-spacing: 1.5px;
 }
-*[data-bwx='2'] {
-  border-left-width: 2px;
-  border-right-width: 2px;
+/* ===================== */
+
+/* Heights */
+
+*[data-height='100%'] {
+  height: 100%;
 }
-*[data-bwx='4'] {
-  border-left-width: 4px;
-  border-right-width: 4px;
+*[data-height='auto'] {
+  height: auto;
 }
-*[data-bwx='6'] {
-  border-left-width: 6px;
-  border-right-width: 6px;
+*[data-height='unset'] {
+  height: unset;
 }
-*[data-bwx='12'] {
-  border-left-width: 12px;
-  border-right-width: 12px;
+@media (max-width: 768px) {
+  *[data-md-height='100%'] {
+    height: 100%;
+  }
+  *[data-md-height='auto'] {
+    height: auto;
+  }
+  *[data-md-height='unset'] {
+    height: unset;
+  }
 }
-*[data-bwy='1'] {
-  border-top-width: 1px;
-  border-bottom-width: 1px;
+/* ===================== */
+
+/* Gaps */
+
+*[data-gap='0'] {
+  gap: 0;
 }
-*[data-bwy='2'] {
-  border-top-width: 2px;
-  border-bottom-width: 2px;
+*[data-gap='3'] {
+  gap: 3px;
 }
-*[data-bwy='4'] {
-  border-top-width: 4px;
-  border-bottom-width: 4px;
+*[data-gap='6'] {
+  gap: 6px;
 }
-*[data-bwy='6'] {
-  border-top-width: 6px;
-  border-bottom-width: 6px;
+*[data-gap='12'] {
+  gap: 12px;
 }
-*[data-bwy='12'] {
-  border-top-width: 12px;
-  border-bottom-width: 12px;
+*[data-gap='24'] {
+  gap: 24px;
 }
-*[data-bwt='1'] {
-  border-top-width: 1px;
+*[data-gap='36'] {
+  gap: 36px;
 }
-*[data-bwt='2'] {
-  border-top-width: 2px;
+*[data-gap='48'] {
+  gap: 48px;
 }
-*[data-bwt='4'] {
-  border-top-width: 4px;
+*[data-gap='72'] {
+  gap: 72px;
 }
-*[data-bwt='6'] {
-  border-top-width: 6px;
+*[data-gap='auto'] {
+  gap: auto;
 }
-*[data-bwt='12'] {
-  border-top-width: 12px;
+*[data-gap='unset'] {
+  gap: unset;
 }
-*[data-bwr='1'] {
-  border-right-width: 1px;
+@media (max-width: 768px) {
+  *[data-md-gap='0'] {
+    gap: 0;
+  }
+  *[data-md-gap='3'] {
+    gap: 3px;
+  }
+  *[data-md-gap='6'] {
+    gap: 6px;
+  }
+  *[data-md-gap='12'] {
+    gap: 12px;
+  }
+  *[data-md-gap='24'] {
+    gap: 24px;
+  }
+  *[data-md-gap='36'] {
+    gap: 36px;
+  }
+  *[data-md-gap='48'] {
+    gap: 48px;
+  }
+  *[data-md-gap='72'] {
+    gap: 72px;
+  }
+  *[data-md-gap='auto'] {
+    gap: auto;
+  }
+  *[data-md-gap='unset'] {
+    gap: unset;
+  }
 }
-*[data-bwr='2'] {
-  border-right-width: 2px;
+/* ===================== */
+
+/* Font weights */
+
+*[data-fw='300'] {
+  font-weight: 300;
 }
-*[data-bwr='4'] {
-  border-right-width: 4px;
+*[data-fw='400'] {
+  font-weight: 400;
 }
-*[data-bwr='6'] {
-  border-right-width: 6px;
+*[data-fw='500'] {
+  font-weight: 500;
 }
-*[data-bwr='12'] {
-  border-right-width: 12px;
+*[data-fw='700'] {
+  font-weight: 700;
 }
-*[data-bwb='1'] {
-  border-bottom-width: 1px;
+*[data-fw='900'] {
+  font-weight: 900;
 }
-*[data-bwb='2'] {
-  border-bottom-width: 2px;
+*[data-fw='unset'] {
+  font-weight: unset;
 }
-*[data-bwb='4'] {
-  border-bottom-width: 4px;
+/* ===================== */
+
+/* Font sizes */
+
+*[data-fs='12'] {
+  font-size: 12px;
 }
-*[data-bwb='6'] {
-  border-bottom-width: 6px;
+*[data-fs='14'] {
+  font-size: 14px;
 }
-*[data-bwb='12'] {
-  border-bottom-width: 12px;
+*[data-fs='16'] {
+  font-size: 16px;
 }
-*[data-bwl='1'] {
-  border-left-width: 1px;
+*[data-fs='20'] {
+  font-size: 20px;
 }
-*[data-bwl='2'] {
-  border-left-width: 2px;
+*[data-fs='24'] {
+  font-size: 24px;
 }
-*[data-bwl='4'] {
-  border-left-width: 4px;
+*[data-fs='32'] {
+  font-size: 32px;
 }
-*[data-bwl='6'] {
-  border-left-width: 6px;
+*[data-fs='36'] {
+  font-size: 36px;
 }
-*[data-bwl='12'] {
-  border-left-width: 12px;
+@media (max-width: 768px) {
+  *[data-md-fs='12'] {
+    font-size: 12px;
+  }
+  *[data-md-fs='14'] {
+    font-size: 14px;
+  }
+  *[data-md-fs='16'] {
+    font-size: 16px;
+  }
+  *[data-md-fs='20'] {
+    font-size: 20px;
+  }
+  *[data-md-fs='24'] {
+    font-size: 24px;
+  }
+  *[data-md-fs='32'] {
+    font-size: 32px;
+  }
+  *[data-md-fs='36'] {
+    font-size: 36px;
+  }
 }
 /* ===================== */
 
-/* Border colors */
+/* Font colors */
 
-*[data-bc='white'] {
-  border-color: #F9FAFB;
-  border-style: solid;
-}
-*[data-bc='gray-100'] {
-  border-color: #F3F4F6;
-  border-style: solid;
-}
-*[data-bc='gray-200'] {
-  border-color: #E5E7EB;
-  border-style: solid;
-}
-*[data-bc='gray-300'] {
-  border-color: #D1D5DB;
-  border-style: solid;
+*[data-color='white'] {
+  color: #F9FAFB;
 }
-*[data-bc='gray-400'] {
-  border-color: #9CA3AF;
-  border-style: solid;
+*[data-color='gray-100'] {
+  color: #F3F4F6;
 }
-*[data-bc='gray-500'] {
-  border-color: #6B7280;
-  border-style: solid;
+*[data-color='gray-200'] {
+  color: #E5E7EB;
 }
-*[data-bc='gray-600'] {
-  border-color: #4B5563;
-  border-style: solid;
+*[data-color='gray-300'] {
+  color: #D1D5DB;
 }
-*[data-bc='gray-700'] {
-  border-color: #374151;
-  border-style: solid;
+*[data-color='gray-400'] {
+  color: #9CA3AF;
 }
-*[data-bc='gray-800'] {
-  border-color: #1F2937;
-  border-style: solid;
+*[data-color='gray-500'] {
+  color: #6B7280;
 }
-*[data-bc='black'] {
-  border-color: #111827;
-  border-style: solid;
+*[data-color='gray-600'] {
+  color: #4B5563;
 }
-*[data-bc='transparent'] {
-  border-color: transparent;
-  border-style: solid;
+*[data-color='gray-700'] {
+  color: #374151;
 }
-*[data-bc='green-100'] {
-  border-color: hsl(112, 50%, 85%);
-  border-style: solid;
+*[data-color='gray-800'] {
+  color: #1F2937;
 }
-*[data-bc='green-200'] {
-  border-color: hsl(112, 50%, 75%);
-  border-style: solid;
+*[data-color='black'] {
+  color: #111827;
 }
-*[data-bc='green-300'] {
-  border-color: hsl(112, 50%, 65%);
-  border-style: solid;
+*[data-color='green-100'] {
+  color: hsl(112, 50%, 85%);
 }
-*[data-bc='green-400'] {
-  border-color: hsl(112, 50%, 55%);
-  border-style: solid;
+*[data-color='green-200'] {
+  color: hsl(112, 50%, 75%);
 }
-*[data-bc='green-500'] {
-  border-color: hsl(112, 50%, 45%);
-  border-style: solid;
+*[data-color='green-300'] {
+  color: hsl(112, 50%, 65%);
 }
-*[data-bc='green-600'] {
-  border-color: hsl(112, 50%, 35%);
-  border-style: solid;
+*[data-color='green-400'] {
+  color: hsl(112, 50%, 55%);
 }
-*[data-bc='green-700'] {
-  border-color: hsl(112, 50%, 25%);
-  border-style: solid;
+*[data-color='green-500'] {
+  color: hsl(112, 50%, 45%);
 }
-*[data-bc='green-800'] {
-  border-color: hsl(112, 50%, 20%);
-  border-style: solid;
+*[data-color='green-600'] {
+  color: hsl(112, 50%, 35%);
 }
-*[data-bc='orange-100'] {
-  border-color: hsl(25, 88%, 85%);
-  border-style: solid;
+*[data-color='green-700'] {
+  color: hsl(112, 50%, 25%);
 }
-*[data-bc='orange-200'] {
-  border-color: hsl(25, 88%, 75%);
-  border-style: solid;
+*[data-color='green-800'] {
+  color: hsl(112, 50%, 20%);
 }
-*[data-bc='orange-300'] {
-  border-color: hsl(25, 88%, 65%);
-  border-style: solid;
+*[data-color='red-100'] {
+  color: hsl(5, 80%, 90%);
 }
-*[data-bc='orange-400'] {
-  border-color: hsl(25, 88%, 55%);
-  border-style: solid;
+*[data-color='red-200'] {
+  color: hsl(5, 80%, 83%);
 }
-*[data-bc='orange-500'] {
-  border-color: hsl(25, 88%, 45%);
-  border-style: solid;
+*[data-color='red-300'] {
+  color: hsl(5, 80%, 72.5%);
 }
-*[data-bc='orange-600'] {
-  border-color: hsl(25, 88%, 37.5%);
-  border-style: solid;
+*[data-color='red-400'] {
+  color: hsl(5, 80%, 62.5%);
 }
-*[data-bc='orange-700'] {
-  border-color: hsl(25, 88%, 27.5%);
-  border-style: solid;
+*[data-color='red-500'] {
+  color: hsl(5, 80%, 52.5%);
 }
-*[data-bc='orange-800'] {
-  border-color: hsl(25, 88%, 20%);
-  border-style: solid;
+*[data-color='red-600'] {
+  color: hsl(5, 80%, 42%);
 }
-*[data-bc='red-100'] {
-  border-color: hsl(5, 80%, 90%);
-  border-style: solid;
+*[data-color='red-700'] {
+  color: hsl(5, 80%, 32.5%);
 }
-*[data-bc='red-200'] {
-  border-color: hsl(5, 80%, 83%);
-  border-style: solid;
+*[data-color='red-800'] {
+  color: hsl(5, 80%, 22.5%);
 }
-*[data-bc='red-300'] {
-  border-color: hsl(5, 80%, 72.5%);
-  border-style: solid;
+*[data-color='orange-100'] {
+  color: hsl(25, 88%, 85%);
 }
-*[data-bc='red-400'] {
-  border-color: hsl(5, 80%, 62.5%);
-  border-style: solid;
+*[data-color='orange-200'] {
+  color: hsl(25, 88%, 75%);
 }
-*[data-bc='red-500'] {
-  border-color: hsl(5, 80%, 52.5%);
-  border-style: solid;
+*[data-color='orange-300'] {
+  color: hsl(25, 88%, 65%);
 }
-*[data-bc='red-600'] {
-  border-color: hsl(5, 80%, 42%);
-  border-style: solid;
+*[data-color='orange-400'] {
+  color: hsl(25, 88%, 55%);
 }
-*[data-bc='red-700'] {
-  border-color: hsl(5, 80%, 32.5%);
-  border-style: solid;
+*[data-color='orange-500'] {
+  color: hsl(25, 88%, 45%);
 }
-*[data-bc='red-800'] {
-  border-color: hsl(5, 80%, 22.5%);
-  border-style: solid;
+*[data-color='orange-600'] {
+  color: hsl(25, 88%, 37.5%);
 }
-*[data-bcx='white'] {
-  border-right-color: #F9FAFB;
-  border-left-color: #F9FAFB;
- border-right-style: solid;
-  border-left-style: solid;
+*[data-color='orange-700'] {
+  color: hsl(25, 88%, 27.5%);
 }
-*[data-bcx='gray-100'] {
-  border-right-color: #F3F4F6;
-  border-left-color: #F3F4F6;
- border-right-style: solid;
-  border-left-style: solid;
+*[data-color='orange-800'] {
+  color: hsl(25, 88%, 20%);
 }
-*[data-bcx='gray-200'] {
-  border-right-color: #E5E7EB;
-  border-left-color: #E5E7EB;
- border-right-style: solid;
-  border-left-style: solid;
+/* ===================== */
+
+/* Flex wraps */
+
+*[data-wrap='nowrap'] {
+  flex-wrap: nowrap;
 }
-*[data-bcx='gray-300'] {
-  border-right-color: #D1D5DB;
-  border-left-color: #D1D5DB;
- border-right-style: solid;
-  border-left-style: solid;
+*[data-wrap='wrap'] {
+  flex-wrap: wrap;
 }
-*[data-bcx='gray-400'] {
-  border-right-color: #9CA3AF;
-  border-left-color: #9CA3AF;
- border-right-style: solid;
-  border-left-style: solid;
+*[data-wrap='wrap-reverse'] {
+  flex-wrap: wrap-reverse;
 }
-*[data-bcx='gray-500'] {
-  border-right-color: #6B7280;
-  border-left-color: #6B7280;
- border-right-style: solid;
-  border-left-style: solid;
+*[data-wrap='unset'] {
+  flex-wrap: unset;
 }
-*[data-bcx='gray-600'] {
-  border-right-color: #4B5563;
-  border-left-color: #4B5563;
- border-right-style: solid;
-  border-left-style: solid;
+@media (max-width: 768px) {
+  *[data-md-wrap='nowrap'] {
+    flex-wrap: nowrap;
+  }
+  *[data-md-wrap='wrap'] {
+    flex-wrap: wrap;
+  }
+  *[data-md-wrap='wrap-reverse'] {
+    flex-wrap: wrap-reverse;
+  }
+  *[data-md-wrap='unset'] {
+    flex-wrap: unset;
+  }
 }
-*[data-bcx='gray-700'] {
-  border-right-color: #374151;
-  border-left-color: #374151;
- border-right-style: solid;
-  border-left-style: solid;
+/* ===================== */
+
+/* Flex shrinks */
+
+*[data-shrink='0'] {
+  flex-shrink: 0;
 }
-*[data-bcx='gray-800'] {
-  border-right-color: #1F2937;
-  border-left-color: #1F2937;
- border-right-style: solid;
-  border-left-style: solid;
+*[data-shrink='unset'] {
+  flex-shrink: unset;
 }
-*[data-bcx='black'] {
-  border-right-color: #111827;
-  border-left-color: #111827;
- border-right-style: solid;
-  border-left-style: solid;
+@media (max-width: 768px) {
+  *[data-md-shrink='0'] {
+    flex-shrink: 0;
+  }
+  *[data-md-shrink='unset'] {
+    flex-shrink: unset;
+  }
 }
-*[data-bcx='transparent'] {
-  border-right-color: transparent;
-  border-left-color: transparent;
- border-right-style: solid;
-  border-left-style: solid;
+/* ===================== */
+
+/* Flex grows */
+
+*[data-grow='1'] {
+  flex-grow: 1;
 }
-*[data-bcy='white'] {
-  border-top-color: #F9FAFB;
-  border-bottom-color: #F9FAFB;
- border-top-style: solid;
-  border-bottom-style: solid;
+*[data-grow='unset'] {
+  flex-grow: unset;
 }
-*[data-bcy='gray-100'] {
-  border-top-color: #F3F4F6;
-  border-bottom-color: #F3F4F6;
- border-top-style: solid;
-  border-bottom-style: solid;
+@media (max-width: 768px) {
+  *[data-md-grow='1'] {
+    flex-grow: 1;
+  }
+  *[data-md-grow='unset'] {
+    flex-grow: unset;
+  }
 }
-*[data-bcy='gray-200'] {
-  border-top-color: #E5E7EB;
-  border-bottom-color: #E5E7EB;
- border-top-style: solid;
-  border-bottom-style: solid;
+/* ===================== */
+
+/* Flex directions */
+
+*[data-direction='row'] {
+  flex-direction: row;
 }
-*[data-bcy='gray-300'] {
-  border-top-color: #D1D5DB;
-  border-bottom-color: #D1D5DB;
- border-top-style: solid;
-  border-bottom-style: solid;
+*[data-direction='row-reverse'] {
+  flex-direction: row-reverse;
 }
-*[data-bcy='gray-400'] {
-  border-top-color: #9CA3AF;
-  border-bottom-color: #9CA3AF;
- border-top-style: solid;
-  border-bottom-style: solid;
+*[data-direction='column'] {
+  flex-direction: column;
 }
-*[data-bcy='gray-500'] {
-  border-top-color: #6B7280;
-  border-bottom-color: #6B7280;
- border-top-style: solid;
-  border-bottom-style: solid;
+*[data-direction='column-reverse'] {
+  flex-direction: column-reverse;
 }
-*[data-bcy='gray-600'] {
-  border-top-color: #4B5563;
-  border-bottom-color: #4B5563;
- border-top-style: solid;
-  border-bottom-style: solid;
+@media (max-width: 768px) {
+  *[data-md-direction='row'] {
+    flex-direction: row;
+  }
+  *[data-md-direction='row-reverse'] {
+    flex-direction: row-reverse;
+  }
+  *[data-md-direction='column'] {
+    flex-direction: column;
+  }
+  *[data-md-direction='column-reverse'] {
+    flex-direction: column-reverse;
+  }
 }
-*[data-bcy='gray-700'] {
-  border-top-color: #374151;
-  border-bottom-color: #374151;
- border-top-style: solid;
-  border-bottom-style: solid;
+/* ===================== */
+
+/* Displays */
+
+*[data-display='flex'] {
+  display: flex;
+flex-wrap: wrap;
 }
-*[data-bcy='gray-800'] {
-  border-top-color: #1F2937;
-  border-bottom-color: #1F2937;
- border-top-style: solid;
-  border-bottom-style: solid;
+*[data-display='block'] {
+  display: block;
 }
-*[data-bcy='black'] {
-  border-top-color: #111827;
-  border-bottom-color: #111827;
- border-top-style: solid;
-  border-bottom-style: solid;
+*[data-display='inline-block'] {
+  display: inline-block;
 }
-*[data-bcy='transparent'] {
-  border-top-color: transparent;
-  border-bottom-color: transparent;
- border-top-style: solid;
-  border-bottom-style: solid;
+*[data-display='none'] {
+  display: none;
 }
-*[data-bct='white'] {
-  border-top-color: #F9FAFB;
-  border-top-style: solid;
+@media (max-width: 768px) {
+*[data-md-display='flex'] {
+  display: flex;
+flex-wrap: wrap;
 }
-*[data-bct='gray-100'] {
-  border-top-color: #F3F4F6;
-  border-top-style: solid;
+*[data-md-display='block'] {
+  display: block;
 }
-*[data-bct='gray-200'] {
-  border-top-color: #E5E7EB;
-  border-top-style: solid;
+*[data-md-display='inline-block'] {
+  display: inline-block;
 }
-*[data-bct='gray-300'] {
-  border-top-color: #D1D5DB;
-  border-top-style: solid;
+*[data-md-display='none'] {
+  display: none;
 }
-*[data-bct='gray-400'] {
-  border-top-color: #9CA3AF;
-  border-top-style: solid;
 }
-*[data-bct='gray-500'] {
-  border-top-color: #6B7280;
-  border-top-style: solid;
+/* ===================== */
+
+/* Cursors */
+
+*[data-cursor='wait'] {
+  cursor: wait;
 }
-*[data-bct='gray-600'] {
-  border-top-color: #4B5563;
-  border-top-style: solid;
+*[data-cursor='auto'] {
+  cursor: auto;
 }
-*[data-bct='gray-700'] {
-  border-top-color: #374151;
-  border-top-style: solid;
+*[data-cursor='pointer'] {
+  cursor: pointer;
 }
-*[data-bct='gray-800'] {
-  border-top-color: #1F2937;
-  border-top-style: solid;
+*[data-cursor='not-allowed'] {
+  cursor: not-allowed;
 }
-*[data-bct='black'] {
-  border-top-color: #111827;
-  border-top-style: solid;
+@media (max-width: 768px) {
+  *[data-md-cursor='wait'] {
+    cursor: wait;
+  }
+  *[data-md-cursor='auto'] {
+    cursor: auto;
+  }
+  *[data-md-cursor='pointer'] {
+    cursor: pointer;
+  }
+  *[data-md-cursor='not-allowed'] {
+    cursor: not-allowed;
+  }
 }
-*[data-bct='transparent'] {
-  border-top-color: transparent;
-  border-top-style: solid;
+/* ===================== */
+
+/* Border widths */
+
+*[data-bw='1'] {
+  border-width: 1px;
 }
-*[data-bcr='white'] {
-  border-right-color: #F9FAFB;
-  border-right-style: solid;
+*[data-bw='2'] {
+  border-width: 2px;
 }
-*[data-bcr='gray-100'] {
-  border-right-color: #F3F4F6;
-  border-right-style: solid;
+*[data-bw='4'] {
+  border-width: 4px;
 }
-*[data-bcr='gray-200'] {
-  border-right-color: #E5E7EB;
-  border-right-style: solid;
+*[data-bw='6'] {
+  border-width: 6px;
 }
-*[data-bcr='gray-300'] {
-  border-right-color: #D1D5DB;
-  border-right-style: solid;
+*[data-bw='12'] {
+  border-width: 12px;
 }
-*[data-bcr='gray-400'] {
-  border-right-color: #9CA3AF;
-  border-right-style: solid;
+*[data-bwx='1'] {
+  border-left-width: 1px;
+  border-right-width: 1px;
 }
-*[data-bcr='gray-500'] {
-  border-right-color: #6B7280;
-  border-right-style: solid;
+*[data-bwx='2'] {
+  border-left-width: 2px;
+  border-right-width: 2px;
 }
-*[data-bcr='gray-600'] {
-  border-right-color: #4B5563;
-  border-right-style: solid;
+*[data-bwx='4'] {
+  border-left-width: 4px;
+  border-right-width: 4px;
 }
-*[data-bcr='gray-700'] {
-  border-right-color: #374151;
-  border-right-style: solid;
+*[data-bwx='6'] {
+  border-left-width: 6px;
+  border-right-width: 6px;
 }
-*[data-bcr='gray-800'] {
-  border-right-color: #1F2937;
-  border-right-style: solid;
+*[data-bwx='12'] {
+  border-left-width: 12px;
+  border-right-width: 12px;
 }
-*[data-bcr='black'] {
-  border-right-color: #111827;
-  border-right-style: solid;
+*[data-bwy='1'] {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
 }
-*[data-bcr='transparent'] {
-  border-right-color: transparent;
-  border-right-style: solid;
+*[data-bwy='2'] {
+  border-top-width: 2px;
+  border-bottom-width: 2px;
 }
-*[data-bcb='white'] {
-  border-bottom-color: #F9FAFB;
-  border-bottom-style: solid;
+*[data-bwy='4'] {
+  border-top-width: 4px;
+  border-bottom-width: 4px;
 }
-*[data-bcb='gray-100'] {
-  border-bottom-color: #F3F4F6;
-  border-bottom-style: solid;
+*[data-bwy='6'] {
+  border-top-width: 6px;
+  border-bottom-width: 6px;
 }
-*[data-bcb='gray-200'] {
-  border-bottom-color: #E5E7EB;
-  border-bottom-style: solid;
+*[data-bwy='12'] {
+  border-top-width: 12px;
+  border-bottom-width: 12px;
 }
-*[data-bcb='gray-300'] {
-  border-bottom-color: #D1D5DB;
-  border-bottom-style: solid;
+*[data-bwt='1'] {
+  border-top-width: 1px;
 }
-*[data-bcb='gray-400'] {
-  border-bottom-color: #9CA3AF;
-  border-bottom-style: solid;
+*[data-bwt='2'] {
+  border-top-width: 2px;
 }
-*[data-bcb='gray-500'] {
-  border-bottom-color: #6B7280;
-  border-bottom-style: solid;
+*[data-bwt='4'] {
+  border-top-width: 4px;
 }
-*[data-bcb='gray-600'] {
-  border-bottom-color: #4B5563;
-  border-bottom-style: solid;
+*[data-bwt='6'] {
+  border-top-width: 6px;
 }
-*[data-bcb='gray-700'] {
-  border-bottom-color: #374151;
-  border-bottom-style: solid;
+*[data-bwt='12'] {
+  border-top-width: 12px;
 }
-*[data-bcb='gray-800'] {
-  border-bottom-color: #1F2937;
-  border-bottom-style: solid;
+*[data-bwr='1'] {
+  border-right-width: 1px;
 }
-*[data-bcb='black'] {
-  border-bottom-color: #111827;
-  border-bottom-style: solid;
+*[data-bwr='2'] {
+  border-right-width: 2px;
 }
-*[data-bcb='transparent'] {
-  border-bottom-color: transparent;
-  border-bottom-style: solid;
+*[data-bwr='4'] {
+  border-right-width: 4px;
 }
-*[data-bcl='white'] {
-  border-left-color: #F9FAFB;
-  border-left-style: solid;
+*[data-bwr='6'] {
+  border-right-width: 6px;
 }
-*[data-bcl='gray-100'] {
-  border-left-color: #F3F4F6;
-  border-left-style: solid;
+*[data-bwr='12'] {
+  border-right-width: 12px;
 }
-*[data-bcl='gray-200'] {
-  border-left-color: #E5E7EB;
-  border-left-style: solid;
+*[data-bwb='1'] {
+  border-bottom-width: 1px;
 }
-*[data-bcl='gray-300'] {
-  border-left-color: #D1D5DB;
-  border-left-style: solid;
+*[data-bwb='2'] {
+  border-bottom-width: 2px;
 }
-*[data-bcl='gray-400'] {
-  border-left-color: #9CA3AF;
-  border-left-style: solid;
+*[data-bwb='4'] {
+  border-bottom-width: 4px;
 }
-*[data-bcl='gray-500'] {
-  border-left-color: #6B7280;
-  border-left-style: solid;
+*[data-bwb='6'] {
+  border-bottom-width: 6px;
 }
-*[data-bcl='gray-600'] {
-  border-left-color: #4B5563;
-  border-left-style: solid;
+*[data-bwb='12'] {
+  border-bottom-width: 12px;
 }
-*[data-bcl='gray-700'] {
-  border-left-color: #374151;
-  border-left-style: solid;
+*[data-bwl='1'] {
+  border-left-width: 1px;
 }
-*[data-bcl='gray-800'] {
-  border-left-color: #1F2937;
-  border-left-style: solid;
+*[data-bwl='2'] {
+  border-left-width: 2px;
 }
-*[data-bcl='black'] {
-  border-left-color: #111827;
-  border-left-style: solid;
+*[data-bwl='4'] {
+  border-left-width: 4px;
 }
-*[data-bcl='transparent'] {
-  border-left-color: transparent;
-  border-left-style: solid;
+*[data-bwl='6'] {
+  border-left-width: 6px;
+}
+*[data-bwl='12'] {
+  border-left-width: 12px;
 }
 /* ===================== */
 
@@ -2769,471 +2710,561 @@ flex-wrap: wrap;
 }
 /* ===================== */
 
-/* Max widths */
+/* Border colors */
 
-*[data-max-width='320'] {
-  max-width: 320px;
-}
-*[data-max-width='528'] {
-  max-width: 528px;
-}
-*[data-max-width='768'] {
-  max-width: 768px;
-}
-*[data-max-width='1296'] {
-  max-width: 1296px;
-}
-*[data-max-width='100%'] {
-  max-width: 100%;
+*[data-bc='white'] {
+  border-color: #F9FAFB;
+  border-style: solid;
 }
-*[data-max-width='unset'] {
-  max-width: unset;
+*[data-bc='gray-100'] {
+  border-color: #F3F4F6;
+  border-style: solid;
 }
-@media (max-width: 768px) {
-*[data-md-max-width='320'] {
-  max-width: 320px;
+*[data-bc='gray-200'] {
+  border-color: #E5E7EB;
+  border-style: solid;
 }
-*[data-md-max-width='528'] {
-  max-width: 528px;
+*[data-bc='gray-300'] {
+  border-color: #D1D5DB;
+  border-style: solid;
 }
-*[data-md-max-width='768'] {
-  max-width: 768px;
+*[data-bc='gray-400'] {
+  border-color: #9CA3AF;
+  border-style: solid;
 }
-*[data-md-max-width='1296'] {
-  max-width: 1296px;
+*[data-bc='gray-500'] {
+  border-color: #6B7280;
+  border-style: solid;
 }
-*[data-md-max-width='100%'] {
-  max-width: 100%;
+*[data-bc='gray-600'] {
+  border-color: #4B5563;
+  border-style: solid;
 }
-*[data-md-max-width='unset'] {
-  max-width: unset;
+*[data-bc='gray-700'] {
+  border-color: #374151;
+  border-style: solid;
 }
+*[data-bc='gray-800'] {
+  border-color: #1F2937;
+  border-style: solid;
 }
-/* ===================== */
-
-/* Transforms */
-
-*[data-transform~='uppercase'] {
-  text-transform: uppercase;
+*[data-bc='black'] {
+  border-color: #111827;
+  border-style: solid;
 }
-*[data-transform~='lowercase'] {
-  text-transform: lowercase;
+*[data-bc='transparent'] {
+  border-color: transparent;
+  border-style: solid;
 }
-*[data-transform~='capitalize'] {
-  text-transform: capitalize;
+*[data-bc='green-100'] {
+  border-color: hsl(112, 50%, 85%);
+  border-style: solid;
 }
-*[data-transform~='upper-first']:first-letter {
-  text-transform: uppercase;
+*[data-bc='green-200'] {
+  border-color: hsl(112, 50%, 75%);
+  border-style: solid;
 }
-*[data-transform~='truncate'] {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+*[data-bc='green-300'] {
+  border-color: hsl(112, 50%, 65%);
+  border-style: solid;
 }
-*[data-transform~='center'] {
-  text-align: center;
+*[data-bc='green-400'] {
+  border-color: hsl(112, 50%, 55%);
+  border-style: solid;
 }
-*[data-transform~='nowrap'] {
-  white-space: nowrap;
+*[data-bc='green-500'] {
+  border-color: hsl(112, 50%, 45%);
+  border-style: solid;
 }
-*[data-transform~='none'] {
-  text-transform: none;
+*[data-bc='green-600'] {
+  border-color: hsl(112, 50%, 35%);
+  border-style: solid;
 }
-*[data-transform~='line-clamp'] {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--lines, 2); overflow: hidden;
+*[data-bc='green-700'] {
+  border-color: hsl(112, 50%, 25%);
+  border-style: solid;
 }
-/* ===================== */
-
-/* Overflows */
-
-*[data-overflow='auto'] {
-  overflow: auto;
+*[data-bc='green-800'] {
+  border-color: hsl(112, 50%, 20%);
+  border-style: solid;
 }
-*[data-overflow='scroll'] {
-  overflow: scroll;
+*[data-bc='orange-100'] {
+  border-color: hsl(25, 88%, 85%);
+  border-style: solid;
 }
-*[data-overflow='hidden'] {
-  overflow: hidden;
+*[data-bc='orange-200'] {
+  border-color: hsl(25, 88%, 75%);
+  border-style: solid;
 }
-/* ===================== */
-
-/* Positioners */
-
-*[data-top='0'] {
-  top: 0;
+*[data-bc='orange-300'] {
+  border-color: hsl(25, 88%, 65%);
+  border-style: solid;
 }
-*[data-right='0'] {
-  right: 0;
+*[data-bc='orange-400'] {
+  border-color: hsl(25, 88%, 55%);
+  border-style: solid;
 }
-*[data-bottom='0'] {
-  bottom: 0;
+*[data-bc='orange-500'] {
+  border-color: hsl(25, 88%, 45%);
+  border-style: solid;
 }
-*[data-left='0'] {
-  left: 0;
+*[data-bc='orange-600'] {
+  border-color: hsl(25, 88%, 37.5%);
+  border-style: solid;
 }
-*[data-inset='0'] {
-  inset: 0;
+*[data-bc='orange-700'] {
+  border-color: hsl(25, 88%, 27.5%);
+  border-style: solid;
 }
-*[data-top='3'] {
-  top: 3px;
+*[data-bc='orange-800'] {
+  border-color: hsl(25, 88%, 20%);
+  border-style: solid;
 }
-*[data-right='3'] {
-  right: 3px;
+*[data-bc='red-100'] {
+  border-color: hsl(5, 80%, 90%);
+  border-style: solid;
 }
-*[data-bottom='3'] {
-  bottom: 3px;
+*[data-bc='red-200'] {
+  border-color: hsl(5, 80%, 83%);
+  border-style: solid;
 }
-*[data-left='3'] {
-  left: 3px;
+*[data-bc='red-300'] {
+  border-color: hsl(5, 80%, 72.5%);
+  border-style: solid;
 }
-*[data-inset='3'] {
-  inset: 3px;
+*[data-bc='red-400'] {
+  border-color: hsl(5, 80%, 62.5%);
+  border-style: solid;
 }
-*[data-top='6'] {
-  top: 6px;
+*[data-bc='red-500'] {
+  border-color: hsl(5, 80%, 52.5%);
+  border-style: solid;
 }
-*[data-right='6'] {
-  right: 6px;
+*[data-bc='red-600'] {
+  border-color: hsl(5, 80%, 42%);
+  border-style: solid;
 }
-*[data-bottom='6'] {
-  bottom: 6px;
+*[data-bc='red-700'] {
+  border-color: hsl(5, 80%, 32.5%);
+  border-style: solid;
 }
-*[data-left='6'] {
-  left: 6px;
+*[data-bc='red-800'] {
+  border-color: hsl(5, 80%, 22.5%);
+  border-style: solid;
 }
-*[data-inset='6'] {
-  inset: 6px;
+*[data-bcx='white'] {
+  border-right-color: #F9FAFB;
+  border-left-color: #F9FAFB;
+ border-right-style: solid;
+  border-left-style: solid;
 }
-*[data-top='12'] {
-  top: 12px;
+*[data-bcx='gray-100'] {
+  border-right-color: #F3F4F6;
+  border-left-color: #F3F4F6;
+ border-right-style: solid;
+  border-left-style: solid;
 }
-*[data-right='12'] {
-  right: 12px;
+*[data-bcx='gray-200'] {
+  border-right-color: #E5E7EB;
+  border-left-color: #E5E7EB;
+ border-right-style: solid;
+  border-left-style: solid;
 }
-*[data-bottom='12'] {
-  bottom: 12px;
+*[data-bcx='gray-300'] {
+  border-right-color: #D1D5DB;
+  border-left-color: #D1D5DB;
+ border-right-style: solid;
+  border-left-style: solid;
 }
-*[data-left='12'] {
-  left: 12px;
+*[data-bcx='gray-400'] {
+  border-right-color: #9CA3AF;
+  border-left-color: #9CA3AF;
+ border-right-style: solid;
+  border-left-style: solid;
 }
-*[data-inset='12'] {
-  inset: 12px;
+*[data-bcx='gray-500'] {
+  border-right-color: #6B7280;
+  border-left-color: #6B7280;
+ border-right-style: solid;
+  border-left-style: solid;
 }
-*[data-top='24'] {
-  top: 24px;
+*[data-bcx='gray-600'] {
+  border-right-color: #4B5563;
+  border-left-color: #4B5563;
+ border-right-style: solid;
+  border-left-style: solid;
 }
-*[data-right='24'] {
-  right: 24px;
+*[data-bcx='gray-700'] {
+  border-right-color: #374151;
+  border-left-color: #374151;
+ border-right-style: solid;
+  border-left-style: solid;
 }
-*[data-bottom='24'] {
-  bottom: 24px;
+*[data-bcx='gray-800'] {
+  border-right-color: #1F2937;
+  border-left-color: #1F2937;
+ border-right-style: solid;
+  border-left-style: solid;
 }
-*[data-left='24'] {
-  left: 24px;
+*[data-bcx='black'] {
+  border-right-color: #111827;
+  border-left-color: #111827;
+ border-right-style: solid;
+  border-left-style: solid;
 }
-*[data-inset='24'] {
-  inset: 24px;
+*[data-bcx='transparent'] {
+  border-right-color: transparent;
+  border-left-color: transparent;
+ border-right-style: solid;
+  border-left-style: solid;
 }
-*[data-top='36'] {
-  top: 36px;
+*[data-bcy='white'] {
+  border-top-color: #F9FAFB;
+  border-bottom-color: #F9FAFB;
+ border-top-style: solid;
+  border-bottom-style: solid;
 }
-*[data-right='36'] {
-  right: 36px;
+*[data-bcy='gray-100'] {
+  border-top-color: #F3F4F6;
+  border-bottom-color: #F3F4F6;
+ border-top-style: solid;
+  border-bottom-style: solid;
 }
-*[data-bottom='36'] {
-  bottom: 36px;
+*[data-bcy='gray-200'] {
+  border-top-color: #E5E7EB;
+  border-bottom-color: #E5E7EB;
+ border-top-style: solid;
+  border-bottom-style: solid;
 }
-*[data-left='36'] {
-  left: 36px;
+*[data-bcy='gray-300'] {
+  border-top-color: #D1D5DB;
+  border-bottom-color: #D1D5DB;
+ border-top-style: solid;
+  border-bottom-style: solid;
 }
-*[data-inset='36'] {
-  inset: 36px;
+*[data-bcy='gray-400'] {
+  border-top-color: #9CA3AF;
+  border-bottom-color: #9CA3AF;
+ border-top-style: solid;
+  border-bottom-style: solid;
 }
-*[data-top='48'] {
-  top: 48px;
+*[data-bcy='gray-500'] {
+  border-top-color: #6B7280;
+  border-bottom-color: #6B7280;
+ border-top-style: solid;
+  border-bottom-style: solid;
 }
-*[data-right='48'] {
-  right: 48px;
+*[data-bcy='gray-600'] {
+  border-top-color: #4B5563;
+  border-bottom-color: #4B5563;
+ border-top-style: solid;
+  border-bottom-style: solid;
 }
-*[data-bottom='48'] {
-  bottom: 48px;
+*[data-bcy='gray-700'] {
+  border-top-color: #374151;
+  border-bottom-color: #374151;
+ border-top-style: solid;
+  border-bottom-style: solid;
 }
-*[data-left='48'] {
-  left: 48px;
+*[data-bcy='gray-800'] {
+  border-top-color: #1F2937;
+  border-bottom-color: #1F2937;
+ border-top-style: solid;
+  border-bottom-style: solid;
 }
-*[data-inset='48'] {
-  inset: 48px;
+*[data-bcy='black'] {
+  border-top-color: #111827;
+  border-bottom-color: #111827;
+ border-top-style: solid;
+  border-bottom-style: solid;
 }
-*[data-top='72'] {
-  top: 72px;
+*[data-bcy='transparent'] {
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+ border-top-style: solid;
+  border-bottom-style: solid;
 }
-*[data-right='72'] {
-  right: 72px;
+*[data-bct='white'] {
+  border-top-color: #F9FAFB;
+  border-top-style: solid;
 }
-*[data-bottom='72'] {
-  bottom: 72px;
+*[data-bct='gray-100'] {
+  border-top-color: #F3F4F6;
+  border-top-style: solid;
 }
-*[data-left='72'] {
-  left: 72px;
+*[data-bct='gray-200'] {
+  border-top-color: #E5E7EB;
+  border-top-style: solid;
 }
-*[data-inset='72'] {
-  inset: 72px;
+*[data-bct='gray-300'] {
+  border-top-color: #D1D5DB;
+  border-top-style: solid;
 }
-*[data-top='auto'] {
-  top: auto;
+*[data-bct='gray-400'] {
+  border-top-color: #9CA3AF;
+  border-top-style: solid;
 }
-*[data-right='auto'] {
-  right: auto;
+*[data-bct='gray-500'] {
+  border-top-color: #6B7280;
+  border-top-style: solid;
 }
-*[data-bottom='auto'] {
-  bottom: auto;
+*[data-bct='gray-600'] {
+  border-top-color: #4B5563;
+  border-top-style: solid;
 }
-*[data-left='auto'] {
-  left: auto;
+*[data-bct='gray-700'] {
+  border-top-color: #374151;
+  border-top-style: solid;
 }
-*[data-inset='auto'] {
-  inset: auto;
+*[data-bct='gray-800'] {
+  border-top-color: #1F2937;
+  border-top-style: solid;
 }
-*[data-top='unset'] {
-  top: unset;
+*[data-bct='black'] {
+  border-top-color: #111827;
+  border-top-style: solid;
 }
-*[data-right='unset'] {
-  right: unset;
+*[data-bct='transparent'] {
+  border-top-color: transparent;
+  border-top-style: solid;
 }
-*[data-bottom='unset'] {
-  bottom: unset;
+*[data-bcr='white'] {
+  border-right-color: #F9FAFB;
+  border-right-style: solid;
 }
-*[data-left='unset'] {
-  left: unset;
+*[data-bcr='gray-100'] {
+  border-right-color: #F3F4F6;
+  border-right-style: solid;
 }
-*[data-inset='unset'] {
-  inset: unset;
+*[data-bcr='gray-200'] {
+  border-right-color: #E5E7EB;
+  border-right-style: solid;
 }
-@media (max-width: 768px) {
-*[data-md-top='0'] {
-  top: 0;
+*[data-bcr='gray-300'] {
+  border-right-color: #D1D5DB;
+  border-right-style: solid;
 }
-*[data-md-right='0'] {
-  right: 0;
+*[data-bcr='gray-400'] {
+  border-right-color: #9CA3AF;
+  border-right-style: solid;
 }
-*[data-md-bottom='0'] {
-  bottom: 0;
+*[data-bcr='gray-500'] {
+  border-right-color: #6B7280;
+  border-right-style: solid;
 }
-*[data-md-left='0'] {
-  left: 0;
+*[data-bcr='gray-600'] {
+  border-right-color: #4B5563;
+  border-right-style: solid;
 }
-*[data-md-inset='0'] {
-  inset: 0;
+*[data-bcr='gray-700'] {
+  border-right-color: #374151;
+  border-right-style: solid;
 }
-*[data-md-top='3'] {
-  top: 3px;
+*[data-bcr='gray-800'] {
+  border-right-color: #1F2937;
+  border-right-style: solid;
 }
-*[data-md-right='3'] {
-  right: 3px;
+*[data-bcr='black'] {
+  border-right-color: #111827;
+  border-right-style: solid;
 }
-*[data-md-bottom='3'] {
-  bottom: 3px;
+*[data-bcr='transparent'] {
+  border-right-color: transparent;
+  border-right-style: solid;
 }
-*[data-md-left='3'] {
-  left: 3px;
+*[data-bcb='white'] {
+  border-bottom-color: #F9FAFB;
+  border-bottom-style: solid;
 }
-*[data-md-inset='3'] {
-  inset: 3px;
+*[data-bcb='gray-100'] {
+  border-bottom-color: #F3F4F6;
+  border-bottom-style: solid;
 }
-*[data-md-top='6'] {
-  top: 6px;
+*[data-bcb='gray-200'] {
+  border-bottom-color: #E5E7EB;
+  border-bottom-style: solid;
 }
-*[data-md-right='6'] {
-  right: 6px;
+*[data-bcb='gray-300'] {
+  border-bottom-color: #D1D5DB;
+  border-bottom-style: solid;
 }
-*[data-md-bottom='6'] {
-  bottom: 6px;
+*[data-bcb='gray-400'] {
+  border-bottom-color: #9CA3AF;
+  border-bottom-style: solid;
 }
-*[data-md-left='6'] {
-  left: 6px;
+*[data-bcb='gray-500'] {
+  border-bottom-color: #6B7280;
+  border-bottom-style: solid;
 }
-*[data-md-inset='6'] {
-  inset: 6px;
+*[data-bcb='gray-600'] {
+  border-bottom-color: #4B5563;
+  border-bottom-style: solid;
 }
-*[data-md-top='12'] {
-  top: 12px;
+*[data-bcb='gray-700'] {
+  border-bottom-color: #374151;
+  border-bottom-style: solid;
 }
-*[data-md-right='12'] {
-  right: 12px;
+*[data-bcb='gray-800'] {
+  border-bottom-color: #1F2937;
+  border-bottom-style: solid;
 }
-*[data-md-bottom='12'] {
-  bottom: 12px;
+*[data-bcb='black'] {
+  border-bottom-color: #111827;
+  border-bottom-style: solid;
 }
-*[data-md-left='12'] {
-  left: 12px;
+*[data-bcb='transparent'] {
+  border-bottom-color: transparent;
+  border-bottom-style: solid;
 }
-*[data-md-inset='12'] {
-  inset: 12px;
+*[data-bcl='white'] {
+  border-left-color: #F9FAFB;
+  border-left-style: solid;
 }
-*[data-md-top='24'] {
-  top: 24px;
+*[data-bcl='gray-100'] {
+  border-left-color: #F3F4F6;
+  border-left-style: solid;
 }
-*[data-md-right='24'] {
-  right: 24px;
+*[data-bcl='gray-200'] {
+  border-left-color: #E5E7EB;
+  border-left-style: solid;
 }
-*[data-md-bottom='24'] {
-  bottom: 24px;
+*[data-bcl='gray-300'] {
+  border-left-color: #D1D5DB;
+  border-left-style: solid;
 }
-*[data-md-left='24'] {
-  left: 24px;
+*[data-bcl='gray-400'] {
+  border-left-color: #9CA3AF;
+  border-left-style: solid;
 }
-*[data-md-inset='24'] {
-  inset: 24px;
+*[data-bcl='gray-500'] {
+  border-left-color: #6B7280;
+  border-left-style: solid;
 }
-*[data-md-top='36'] {
-  top: 36px;
+*[data-bcl='gray-600'] {
+  border-left-color: #4B5563;
+  border-left-style: solid;
 }
-*[data-md-right='36'] {
-  right: 36px;
+*[data-bcl='gray-700'] {
+  border-left-color: #374151;
+  border-left-style: solid;
 }
-*[data-md-bottom='36'] {
-  bottom: 36px;
+*[data-bcl='gray-800'] {
+  border-left-color: #1F2937;
+  border-left-style: solid;
 }
-*[data-md-left='36'] {
-  left: 36px;
+*[data-bcl='black'] {
+  border-left-color: #111827;
+  border-left-style: solid;
 }
-*[data-md-inset='36'] {
-  inset: 36px;
+*[data-bcl='transparent'] {
+  border-left-color: transparent;
+  border-left-style: solid;
 }
-*[data-md-top='48'] {
-  top: 48px;
+/* ===================== */
+
+/* Backgrounds */
+
+*[data-bg='white'] {
+  background-color: #F9FAFB;
 }
-*[data-md-right='48'] {
-  right: 48px;
+*[data-bg='gray-100'] {
+  background-color: #F3F4F6;
 }
-*[data-md-bottom='48'] {
-  bottom: 48px;
+*[data-bg='gray-200'] {
+  background-color: #E5E7EB;
 }
-*[data-md-left='48'] {
-  left: 48px;
+*[data-bg='gray-300'] {
+  background-color: #D1D5DB;
 }
-*[data-md-inset='48'] {
-  inset: 48px;
+*[data-bg='gray-400'] {
+  background-color: #9CA3AF;
 }
-*[data-md-top='72'] {
-  top: 72px;
+*[data-bg='gray-500'] {
+  background-color: #6B7280;
 }
-*[data-md-right='72'] {
-  right: 72px;
+*[data-bg='gray-600'] {
+  background-color: #4B5563;
 }
-*[data-md-bottom='72'] {
-  bottom: 72px;
+*[data-bg='gray-700'] {
+  background-color: #374151;
 }
-*[data-md-left='72'] {
-  left: 72px;
+*[data-bg='gray-800'] {
+  background-color: #1F2937;
 }
-*[data-md-inset='72'] {
-  inset: 72px;
+*[data-bg='black'] {
+  background-color: #111827;
 }
-*[data-md-top='auto'] {
-  top: auto;
+*[data-bg='green-100'] {
+  background-color: hsl(112, 50%, 85%);
 }
-*[data-md-right='auto'] {
-  right: auto;
+*[data-bg='green-200'] {
+  background-color: hsl(112, 50%, 75%);
 }
-*[data-md-bottom='auto'] {
-  bottom: auto;
+*[data-bg='green-300'] {
+  background-color: hsl(112, 50%, 65%);
 }
-*[data-md-left='auto'] {
-  left: auto;
+*[data-bg='green-400'] {
+  background-color: hsl(112, 50%, 55%);
 }
-*[data-md-inset='auto'] {
-  inset: auto;
+*[data-bg='green-500'] {
+  background-color: hsl(112, 50%, 45%);
 }
-*[data-md-top='unset'] {
-  top: unset;
+*[data-bg='green-600'] {
+  background-color: hsl(112, 50%, 35%);
 }
-*[data-md-right='unset'] {
-  right: unset;
+*[data-bg='green-700'] {
+  background-color: hsl(112, 50%, 25%);
 }
-*[data-md-bottom='unset'] {
-  bottom: unset;
+*[data-bg='green-800'] {
+  background-color: hsl(112, 50%, 20%);
 }
-*[data-md-left='unset'] {
-  left: unset;
+*[data-bg='red-100'] {
+  background-color: hsl(5, 80%, 90%);
 }
-*[data-md-inset='unset'] {
-  inset: unset;
+*[data-bg='red-200'] {
+  background-color: hsl(5, 80%, 83%);
 }
+*[data-bg='red-300'] {
+  background-color: hsl(5, 80%, 72.5%);
 }
-/* ===================== */
-
-/* Heights */
-
-*[data-height='100%'] {
-  height: 100%;
+*[data-bg='red-400'] {
+  background-color: hsl(5, 80%, 62.5%);
 }
-*[data-height='auto'] {
-  height: auto;
+*[data-bg='red-500'] {
+  background-color: hsl(5, 80%, 52.5%);
 }
-*[data-height='unset'] {
-  height: unset;
+*[data-bg='red-600'] {
+  background-color: hsl(5, 80%, 42%);
+}
+*[data-bg='red-700'] {
+  background-color: hsl(5, 80%, 32.5%);
 }
-@media (max-width: 768px) {
-  *[data-md-height='100%'] {
-    height: 100%;
-  }
-  *[data-md-height='auto'] {
-    height: auto;
-  }
-  *[data-md-height='unset'] {
-    height: unset;
-  }
+*[data-bg='red-800'] {
+  background-color: hsl(5, 80%, 22.5%);
 }
-/* ===================== */
-
-/* Cursors */
-
-*[data-cursor='wait'] {
-  cursor: wait;
+*[data-bg='orange-100'] {
+  background-color: hsl(25, 88%, 85%);
 }
-*[data-cursor='auto'] {
-  cursor: auto;
+*[data-bg='orange-200'] {
+  background-color: hsl(25, 88%, 75%);
 }
-*[data-cursor='pointer'] {
-  cursor: pointer;
+*[data-bg='orange-300'] {
+  background-color: hsl(25, 88%, 65%);
 }
-*[data-cursor='not-allowed'] {
-  cursor: not-allowed;
+*[data-bg='orange-400'] {
+  background-color: hsl(25, 88%, 55%);
 }
-@media (max-width: 768px) {
-  *[data-md-cursor='wait'] {
-    cursor: wait;
-  }
-  *[data-md-cursor='auto'] {
-    cursor: auto;
-  }
-  *[data-md-cursor='pointer'] {
-    cursor: pointer;
-  }
-  *[data-md-cursor='not-allowed'] {
-    cursor: not-allowed;
-  }
+*[data-bg='orange-500'] {
+  background-color: hsl(25, 88%, 45%);
 }
-/* ===================== */
-
-/* Pointer events */
-
-*[data-pointer-events='none'] {
-  pointer-events: none;
+*[data-bg='orange-600'] {
+  background-color: hsl(25, 88%, 37.5%);
 }
-*[data-pointer-events='auto'] {
-  pointer-events: auto;
+*[data-bg='orange-700'] {
+  background-color: hsl(25, 88%, 27.5%);
 }
-@media (max-width: 768px) {
-  *[data-md-pointer-events='none'] {
-    pointer-events: none;
-  }
-  *[data-md-pointer-events='auto'] {
-    pointer-events: auto;
-  }
+*[data-bg='orange-800'] {
+  background-color: hsl(25, 88%, 20%);
 }
 /* ===================== */
 
@@ -3247,135 +3278,117 @@ flex-wrap: wrap;
 }
 /* ===================== */
 
-/* Object fits */
+/* Axis placements */
 
-*[data-object-fit='contain'] {
-  object-fit: contain;
+*[data-main='start'] {
+  justify-content: flex-start;
 }
-*[data-object-fit='cover'] {
-  object-fit: cover;
+*[data-main='end'] {
+  justify-content: flex-end;
 }
-*[data-object-fit='fill'] {
-  object-fit: fill;
+*[data-main='around'] {
+  justify-content: space-around;
 }
-*[data-object-fit='scale-down'] {
-  object-fit: scale-down;
+*[data-main='evenly'] {
+  justify-content: space-evenly;
 }
-*[data-object-fit='none'] {
-  object-fit: none;
+*[data-main='between'] {
+  justify-content: space-between;
 }
-@media (max-width: 768px) {
-  *[data-md-object-fit='contain'] {
-    object-fit: contain;
-  }
-  *[data-md-object-fit='cover'] {
-    object-fit: cover;
-  }
-  *[data-md-object-fit='fill'] {
-    object-fit: fill;
-  }
-  *[data-md-object-fit='scale-down'] {
-    object-fit: scale-down;
-  }
-  *[data-md-object-fit='none'] {
-    object-fit: none;
-  }
+*[data-main='center'] {
+  justify-content: center;
 }
-/* ===================== */
-
-/* Object positions */
-
-*[data-object-position='top'] {
-  object-position: top;
+*[data-main='baseline'] {
+  justify-content: baseline;
 }
-*[data-object-position='bottom'] {
-  object-position: bottom;
+*[data-cross='start'] {
+  align-items: flex-start;
 }
-*[data-object-position='left'] {
-  object-position: left;
+*[data-cross='end'] {
+  align-items: flex-end;
 }
-*[data-object-position='right'] {
-  object-position: right;
+*[data-cross='around'] {
+  align-items: space-around;
 }
-*[data-object-position='center'] {
-  object-position: center;
+*[data-cross='evenly'] {
+  align-items: space-evenly;
 }
-*[data-object-position='top-left'] {
-  object-position: top left;
+*[data-cross='between'] {
+  align-items: space-between;
 }
-*[data-object-position='top-right'] {
-  object-position: top right;
+*[data-cross='center'] {
+  align-items: center;
+}
+*[data-cross='baseline'] {
+  align-items: baseline;
+}
+*[data-self='start'] {
+  align-self: flex-start;
+}
+*[data-self='end'] {
+  align-self: flex-end;
+}
+*[data-self='center'] {
+  align-self: center;
+}
+*[data-self='baseline'] {
+  align-self: baseline;
 }
 @media (max-width: 768px) {
-  *[data-md-object-position='top'] {
-    object-position: top;
+  *[data-md-main='start'] {
+    justify-content: flex-start;
   }
-  *[data-md-object-position='bottom'] {
-    object-position: bottom;
+  *[data-md-main='end'] {
+    justify-content: flex-end;
   }
-  *[data-md-object-position='left'] {
-    object-position: left;
+  *[data-md-main='around'] {
+    justify-content: space-around;
   }
-  *[data-md-object-position='right'] {
-    object-position: right;
+  *[data-md-main='evenly'] {
+    justify-content: space-evenly;
   }
-  *[data-md-object-position='center'] {
-    object-position: center;
+  *[data-md-main='between'] {
+    justify-content: space-between;
   }
-  *[data-md-object-position='top-left'] {
-    object-position: top left;
+  *[data-md-main='center'] {
+    justify-content: center;
   }
-  *[data-md-object-position='top-right'] {
-    object-position: top right;
+  *[data-md-main='baseline'] {
+    justify-content: baseline;
   }
-}
-/* ===================== */
-
-/* Rotates */
-
-*[data-rotate='0'] {
-  transform: rotate(0deg);
-}
-*[data-rotate='90'] {
-  transform: rotate(90deg);
-}
-*[data-rotate='180'] {
-  transform: rotate(180deg);
-}
-*[data-rotate='270'] {
-  transform: rotate(270deg);
-}
-@media (max-width: 768px) {
-  *[data-md-rotate='0'] {
-    transform: rotate(0deg);
+  *[data-md-cross='start'] {
+    align-items: flex-start;
   }
-  *[data-md-rotate='90'] {
-    transform: rotate(90deg);
+  *[data-md-cross='end'] {
+    align-items: flex-end;
   }
-  *[data-md-rotate='180'] {
-    transform: rotate(180deg);
+  *[data-md-cross='around'] {
+    align-items: space-around;
   }
-  *[data-md-rotate='270'] {
-    transform: rotate(270deg);
+  *[data-md-cross='evenly'] {
+    align-items: space-evenly;
+  }
+  *[data-md-cross='between'] {
+    align-items: space-between;
+  }
+  *[data-md-cross='center'] {
+    align-items: center;
+  }
+  *[data-md-cross='baseline'] {
+    align-items: baseline;
+  }
+  *[data-md-self='start'] {
+    align-self: flex-start;
+  }
+  *[data-md-self='end'] {
+    align-self: flex-end;
+  }
+  *[data-md-self='center'] {
+    align-self: center;
+  }
+  *[data-md-self='baseline'] {
+    align-self: baseline;
   }
-}
-/* ===================== */
-
-/* Max heights */
-
-*[data-max-height='100%'] {
-  max-height: 100%;
-}
-*[data-max-height='unset'] {
-  max-height: unset;
-}
-@media (max-width: 768px) {
-*[data-md-max-height='100%'] {
-  max-height: 100%;
-}
-*[data-md-max-height='unset'] {
-  max-height: unset;
-}
 }
 /* ===================== */