@navikt/ds-css 5.10.1 → 5.10.3

package/dist/components.css

@@ -341,675 +341,272 @@
   color: var(--__ac-typo-text-subtle, var(--a-text-subtle));
 }
 
-.navds-box {
-  --__ac-box-padding-xs: initial;
-  --__ac-box-padding-sm: var(--__ac-box-padding-xs);
-  --__ac-box-padding-md: var(--__ac-box-padding-sm);
-  --__ac-box-padding-lg: var(--__ac-box-padding-md);
-  --__ac-box-padding-xl: var(--__ac-box-padding-lg);
-  --__ac-box-padding-inline-xs: initial;
-  --__ac-box-padding-inline-sm: var(--__ac-box-padding-inline-xs);
-  --__ac-box-padding-inline-md: var(--__ac-box-padding-inline-sm);
-  --__ac-box-padding-inline-lg: var(--__ac-box-padding-inline-md);
-  --__ac-box-padding-inline-xl: var(--__ac-box-padding-inline-lg);
-  --__ac-box-padding-block-xs: initial;
-  --__ac-box-padding-block-sm: var(--__ac-box-padding-block-xs);
-  --__ac-box-padding-block-md: var(--__ac-box-padding-block-sm);
-  --__ac-box-padding-block-lg: var(--__ac-box-padding-block-md);
-  --__ac-box-padding-block-xl: var(--__ac-box-padding-block-lg);
-  --__ac-box-padding: var(--__ac-box-padding-xs);
-  --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
-  --__ac-box-padding-block: var(--__ac-box-padding-block-xs);
-  --__ac-box-background: initial;
-  --__ac-box-border-color: initial;
-  --__ac-box-shadow: initial;
-  --__ac-box-border-width: initial;
-  --__ac-box-border-radius-xs: initial;
-  --__ac-box-border-radius-sm: var(--__ac-box-border-radius-xs);
-  --__ac-box-border-radius-md: var(--__ac-box-border-radius-sm);
-  --__ac-box-border-radius-lg: var(--__ac-box-border-radius-md);
-  --__ac-box-border-radius-xl: var(--__ac-box-border-radius-lg);
-  --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
+/**************************
+ * .navds-grid *
+ **************************/
 
-  padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
-  padding-block: var(--__ac-box-padding-block, var(--__ac-box-padding));
-  background-color: var(--__ac-box-background);
-  border-style: solid;
-  border-color: var(--__ac-box-border-color);
-  border-radius: var(--__ac-box-border-radius);
-  box-shadow: var(--__ac-box-shadow);
-  border-width: var(--__ac-box-border-width, 0);
+.navds-grid {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  grid-gap: var(--a-spacing-4);
 }
 
-@media (min-width: 480px) {
-  .navds-box {
-    --__ac-box-padding: var(--__ac-box-padding-sm);
-    --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm);
-    --__ac-box-padding-block: var(--__ac-box-padding-block-sm);
-    --__ac-box-border-radius: var(--__ac-box-border-radius-sm);
+@media (min-width: 448px) {
+  .navds-grid {
+    grid-gap: var(--a-spacing-6);
   }
 }
 
-@media (min-width: 768px) {
-  .navds-box {
-    --__ac-box-padding: var(--__ac-box-padding-md);
-    --__ac-box-padding-inline: var(--__ac-box-padding-inline-md);
-    --__ac-box-padding-block: var(--__ac-box-padding-block-md);
-    --__ac-box-border-radius: var(--__ac-box-border-radius-md);
-  }
+/**************************
+ * .navds-grid__cell *
+ **************************/
+
+.navds-grid__cell--xs-1 {
+  grid-column: span 1;
 }
 
-@media (min-width: 1024px) {
-  .navds-box {
-    --__ac-box-padding: var(--__ac-box-padding-lg);
-    --__ac-box-padding-inline: var(--__ac-box-padding-inline-lg);
-    --__ac-box-padding-block: var(--__ac-box-padding-block-lg);
-    --__ac-box-border-radius: var(--__ac-box-border-radius-lg);
-  }
+.navds-grid__cell--xs-2 {
+  grid-column: span 2;
 }
 
-@media (min-width: 1280px) {
-  .navds-box {
-    --__ac-box-padding: var(--__ac-box-padding-xl);
-    --__ac-box-padding-inline: var(--__ac-box-padding-inline-xl);
-    --__ac-box-padding-block: var(--__ac-box-padding-block-xl);
-    --__ac-box-border-radius: var(--__ac-box-border-radius-xl);
-  }
+.navds-grid__cell--xs-3 {
+  grid-column: span 3;
 }
 
-.navds-bleed {
-  --__ac-bleed-margin-inline-xs: initial;
-  --__ac-bleed-margin-inline-sm: var(--__ac-bleed-margin-inline-xs);
-  --__ac-bleed-margin-inline-md: var(--__ac-bleed-margin-inline-sm);
-  --__ac-bleed-margin-inline-lg: var(--__ac-bleed-margin-inline-md);
-  --__ac-bleed-margin-inline-xl: var(--__ac-bleed-margin-inline-lg);
-  --__ac-bleed-margin-block-xs: initial;
-  --__ac-bleed-margin-block-sm: var(--__ac-bleed-margin-block-xs);
-  --__ac-bleed-margin-block-md: var(--__ac-bleed-margin-block-sm);
-  --__ac-bleed-margin-block-lg: var(--__ac-bleed-margin-block-md);
-  --__ac-bleed-margin-block-xl: var(--__ac-bleed-margin-block-lg);
+.navds-grid__cell--xs-4 {
+  grid-column: span 4;
+}
 
-  /** defaults */
-  --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xs);
-  --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xs);
+.navds-grid__cell--xs-5 {
+  grid-column: span 5;
+}
 
-  margin-inline: var(--__ac-bleed-margin-inline);
-  margin-block: var(--__ac-bleed-margin-block);
+.navds-grid__cell--xs-6 {
+  grid-column: span 6;
 }
 
-.navds-bleed--padding {
-  --__ac-bleed-padding-inline-xs: initial;
-  --__ac-bleed-padding-inline-sm: var(--__ac-bleed-padding-inline-xs);
-  --__ac-bleed-padding-inline-md: var(--__ac-bleed-padding-inline-sm);
-  --__ac-bleed-padding-inline-lg: var(--__ac-bleed-padding-inline-md);
-  --__ac-bleed-padding-inline-xl: var(--__ac-bleed-padding-inline-lg);
-  --__ac-bleed-padding-block-xs: initial;
-  --__ac-bleed-padding-block-sm: var(--__ac-bleed-padding-block-xs);
-  --__ac-bleed-padding-block-md: var(--__ac-bleed-padding-block-sm);
-  --__ac-bleed-padding-block-lg: var(--__ac-bleed-padding-block-md);
-  --__ac-bleed-padding-block-xl: var(--__ac-bleed-padding-block-lg);
+.navds-grid__cell--xs-7 {
+  grid-column: span 7;
+}
 
-  /** defaults */
-  --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xs);
-  --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xs);
+.navds-grid__cell--xs-8 {
+  grid-column: span 8;
+}
 
-  padding-inline: var(--__ac-bleed-padding-inline);
-  padding-block: var(--__ac-bleed-padding-block);
+.navds-grid__cell--xs-9 {
+  grid-column: span 9;
 }
 
-@media (min-width: 480px) {
-  .navds-bleed {
-    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-sm);
-    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-sm);
-  }
+.navds-grid__cell--xs-10 {
+  grid-column: span 10;
+}
 
-  .navds-bleed--padding {
-    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-sm);
-    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-sm);
-  }
+.navds-grid__cell--xs-11 {
+  grid-column: span 11;
 }
 
-@media (min-width: 768px) {
-  .navds-bleed {
-    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-md);
-    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-md);
+.navds-grid__cell--xs-12 {
+  grid-column: span 12;
+}
+
+@media (min-width: 448px) {
+  .navds-grid__cell--sm-1 {
+    grid-column: span 1;
   }
 
-  .navds-bleed--padding {
-    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-md);
-    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-md);
+  .navds-grid__cell--sm-2 {
+    grid-column: span 2;
   }
-}
 
-@media (min-width: 1024px) {
-  .navds-bleed {
-    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-lg);
-    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-lg);
+  .navds-grid__cell--sm-3 {
+    grid-column: span 3;
   }
 
-  .navds-bleed--padding {
-    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-lg);
-    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-lg);
+  .navds-grid__cell--sm-4 {
+    grid-column: span 4;
   }
-}
 
-@media (min-width: 1280px) {
-  .navds-bleed {
-    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xl);
-    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xl);
+  .navds-grid__cell--sm-5 {
+    grid-column: span 5;
   }
 
-  .navds-bleed--padding {
-    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xl);
-    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xl);
+  .navds-grid__cell--sm-6 {
+    grid-column: span 6;
   }
-}
 
-.navds-page {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  min-height: 100lvh;
+  .navds-grid__cell--sm-7 {
+    grid-column: span 7;
+  }
 
-  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
-  background-color: var(--__ac-page-background);
-}
+  .navds-grid__cell--sm-8 {
+    grid-column: span 8;
+  }
 
-/* Page.Block */
+  .navds-grid__cell--sm-9 {
+    grid-column: span 9;
+  }
 
-.navds-pageblock {
-  margin-inline: auto;
-  width: 100%;
-}
+  .navds-grid__cell--sm-10 {
+    grid-column: span 10;
+  }
 
-.navds-page__content--grow {
-  flex-grow: 1;
-}
+  .navds-grid__cell--sm-11 {
+    grid-column: span 11;
+  }
 
-.navds-page__content--fullheight {
-  min-height: 100vh;
-  min-height: 100lvh;
+  .navds-grid__cell--sm-12 {
+    grid-column: span 12;
+  }
 }
 
-.navds-page__content--padding {
-  padding-block-end: var(--a-spacing-8);
-}
+@media (min-width: 648px) {
+  .navds-grid__cell--md-1 {
+    grid-column: span 1;
+  }
 
-.navds-pageblock--lg {
-  max-width: 1024px;
-}
+  .navds-grid__cell--md-2 {
+    grid-column: span 2;
+  }
 
-.navds-pageblock--xl {
-  max-width: 1280px;
-}
+  .navds-grid__cell--md-3 {
+    grid-column: span 3;
+  }
 
-.navds-pageblock--2xl {
-  max-width: 1440px;
-}
+  .navds-grid__cell--md-4 {
+    grid-column: span 4;
+  }
 
-.navds-pageblock--gutters {
-  padding-inline: var(--a-spacing-4);
-}
+  .navds-grid__cell--md-5 {
+    grid-column: span 5;
+  }
 
-@media (min-width: 1024px) {
-  .navds-pageblock--gutters {
-    padding-inline: var(--a-spacing-12);
+  .navds-grid__cell--md-6 {
+    grid-column: span 6;
   }
-}
-
-.navds-hgrid {
-  --__ac-hgrid-columns-xs: initial;
-  --__ac-hgrid-columns-sm: initial;
-  --__ac-hgrid-columns-md: initial;
-  --__ac-hgrid-columns-lg: initial;
-  --__ac-hgrid-columns-xl: initial;
-  --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
-  --__ac-hgrid-gap-xs: initial;
-  --__ac-hgrid-gap-sm: initial;
-  --__ac-hgrid-gap-md: initial;
-  --__ac-hgrid-gap-lg: initial;
-  --__ac-hgrid-gap-xl: initial;
-  --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
-  --__ac-hgrid-align: initial;
-
-  display: grid;
-  grid-template-columns: var(--__ac-hgrid-columns);
-  gap: var(--__ac-hgrid-gap);
-  align-items: var(--__ac-hgrid-align);
-}
 
-@media (min-width: 480px) {
-  .navds-hgrid {
-    --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs));
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs));
+  .navds-grid__cell--md-7 {
+    grid-column: span 7;
   }
-}
 
-@media (min-width: 768px) {
-  .navds-hgrid {
-    --__ac-hgrid-columns: var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)));
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs)));
+  .navds-grid__cell--md-8 {
+    grid-column: span 8;
   }
-}
 
-@media (min-width: 1024px) {
-  .navds-hgrid {
-    --__ac-hgrid-columns: var(
-      --__ac-hgrid-columns-lg,
-      var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)))
-    );
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))));
+  .navds-grid__cell--md-9 {
+    grid-column: span 9;
   }
-}
 
-@media (min-width: 1280px) {
-  .navds-hgrid {
-    --__ac-hgrid-columns: var(
-      --__ac-hgrid-columns-xl,
-      var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
-    );
-    --__ac-hgrid-gap: var(
-      --__ac-hgrid-gap-xl,
-      var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
-    );
+  .navds-grid__cell--md-10 {
+    grid-column: span 10;
   }
-}
-
-.navds-stack {
-  --__ac-stack-wrap: initial;
-  --__ac-stack-gap-xs: initial;
-  --__ac-stack-gap-sm: var(--__ac-stack-gap-xs);
-  --__ac-stack-gap-md: var(--__ac-stack-gap-sm);
-  --__ac-stack-gap-lg: var(--__ac-stack-gap-md);
-  --__ac-stack-gap-xl: var(--__ac-stack-gap-lg);
-  --__ac-stack-gap: var(--__ac-stack-gap-xs);
-  --__ac-stack-justify-xs: initial;
-  --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
-  --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
-  --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
-  --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
-  --__ac-stack-justify: var(--__ac-stack-justify-xs);
-  --__ac-stack-align-xs: initial;
-  --__ac-stack-align-sm: var(--__ac-stack-align-xs);
-  --__ac-stack-align-md: var(--__ac-stack-align-sm);
-  --__ac-stack-align-lg: var(--__ac-stack-align-md);
-  --__ac-stack-align-xl: var(--__ac-stack-align-lg);
-  --__ac-stack-align: var(--__ac-stack-align-xs);
-  --__ac-stack-direction-xs: initial;
-  --__ac-stack-direction-sm: var(--__ac-stack-direction-xs);
-  --__ac-stack-direction-md: var(--__ac-stack-direction-sm);
-  --__ac-stack-direction-lg: var(--__ac-stack-direction-md);
-  --__ac-stack-direction-xl: var(--__ac-stack-direction-lg);
-  --__ac-stack-direction: var(--__ac-stack-direction-xs);
-
-  gap: var(--__ac-stack-gap);
-  display: flex;
-  align-items: var(--__ac-stack-align);
-  justify-content: var(--__ac-stack-justify);
-  flex-flow: var(--__ac-stack-direction) var(--__ac-stack-wrap);
-}
 
-.navds-stack__spacer {
-  flex: 1;
-  justify-self: stretch;
-  align-self: stretch;
-}
+  .navds-grid__cell--md-11 {
+    grid-column: span 11;
+  }
 
-.navds-stack > .navds-stack__spacer {
-  margin-block-start: calc(var(--__ac-stack-gap) * -1);
-  margin-inline-start: calc(var(--__ac-stack-gap) * -1);
+  .navds-grid__cell--md-12 {
+    grid-column: span 12;
+  }
 }
 
-@media (min-width: 480px) {
-  .navds-stack {
-    --__ac-stack-gap: var(--__ac-stack-gap-sm);
-    --__ac-stack-align: var(--__ac-stack-align-sm);
-    --__ac-stack-justify: var(--__ac-stack-justify-sm);
-    --__ac-stack-direction: var(--__ac-stack-direction-sm);
+@media (min-width: 960px) {
+  .navds-grid__cell--lg-1 {
+    grid-column: span 1;
   }
-}
 
-@media (min-width: 768px) {
-  .navds-stack {
-    --__ac-stack-gap: var(--__ac-stack-gap-md);
-    --__ac-stack-align: var(--__ac-stack-align-md);
-    --__ac-stack-justify: var(--__ac-stack-justify-md);
-    --__ac-stack-direction: var(--__ac-stack-direction-md);
+  .navds-grid__cell--lg-2 {
+    grid-column: span 2;
   }
-}
 
-@media (min-width: 1024px) {
-  .navds-stack {
-    --__ac-stack-gap: var(--__ac-stack-gap-lg);
-    --__ac-stack-align: var(--__ac-stack-align-lg);
-    --__ac-stack-justify: var(--__ac-stack-justify-lg);
-    --__ac-stack-direction: var(--__ac-stack-direction-lg);
+  .navds-grid__cell--lg-3 {
+    grid-column: span 3;
   }
-}
 
-@media (min-width: 1280px) {
-  .navds-stack {
-    --__ac-stack-gap: var(--__ac-stack-gap-xl);
-    --__ac-stack-align: var(--__ac-stack-align-xl);
-    --__ac-stack-justify: var(--__ac-stack-justify-xl);
-    --__ac-stack-direction: var(--__ac-stack-direction-xl);
+  .navds-grid__cell--lg-4 {
+    grid-column: span 4;
   }
-}
 
-@media (min-width: 480px) {
-  .navds-responsive__below--sm {
-    display: none !important;
+  .navds-grid__cell--lg-5 {
+    grid-column: span 5;
   }
-}
 
-@media (max-width: 479px) {
-  .navds-responsive__above--sm {
-    display: none !important;
+  .navds-grid__cell--lg-6 {
+    grid-column: span 6;
   }
-}
 
-@media (min-width: 768px) {
-  .navds-responsive__below--md {
-    display: none !important;
+  .navds-grid__cell--lg-7 {
+    grid-column: span 7;
   }
-}
 
-@media (max-width: 767px) {
-  .navds-responsive__above--md {
-    display: none !important;
+  .navds-grid__cell--lg-8 {
+    grid-column: span 8;
   }
-}
 
-@media (min-width: 1024px) {
-  .navds-responsive__below--lg {
-    display: none !important;
+  .navds-grid__cell--lg-9 {
+    grid-column: span 9;
   }
-}
 
-@media (max-width: 1023px) {
-  .navds-responsive__above--lg {
-    display: none !important;
+  .navds-grid__cell--lg-10 {
+    grid-column: span 10;
   }
-}
 
-@media (min-width: 1280px) {
-  .navds-responsive__below--xl {
-    display: none !important;
+  .navds-grid__cell--lg-11 {
+    grid-column: span 11;
   }
-}
 
-@media (max-width: 1279px) {
-  .navds-responsive__above--xl {
-    display: none !important;
+  .navds-grid__cell--lg-12 {
+    grid-column: span 12;
   }
 }
 
-/**************************
- * .navds-grid *
- **************************/
-
-.navds-grid {
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  grid-gap: var(--a-spacing-4);
+.navds-accordion {
+  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
 }
 
-@media (min-width: 448px) {
-  .navds-grid {
-    grid-gap: var(--a-spacing-6);
-  }
+.navds-accordion__item:focus-within {
+  position: relative;
 }
 
-/**************************
- * .navds-grid__cell *
- **************************/
+/*************************
+ * Header *
+ *************************/
 
-.navds-grid__cell--xs-1 {
-  grid-column: span 1;
+.navds-accordion__header {
+  --__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
+    inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
+
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: var(--a-spacing-2);
+  padding: var(--a-spacing-3);
+  margin: 0;
+  text-align: left;
+  background: var(--ac-accordion-header-bg, var(--a-surface-transparent));
+  cursor: pointer;
+  border: none;
+  position: relative;
+  box-shadow: var(--__ac-accordion-header-shadow);
+  z-index: 1;
 }
 
-.navds-grid__cell--xs-2 {
-  grid-column: span 2;
+.navds-accordion__header:hover {
+  background-color: var(--ac-accordion-header-bg-hover, var(--a-surface-hover));
+  text-decoration: underline;
+  color: var(--ac-accordion-header-text-hover, inherit);
 }
 
-.navds-grid__cell--xs-3 {
-  grid-column: span 3;
+.navds-accordion--small .navds-accordion__header {
+  padding: var(--a-spacing-2) var(--a-spacing-3);
 }
 
-.navds-grid__cell--xs-4 {
-  grid-column: span 4;
+.navds-accordion--medium .navds-accordion__header {
+  padding: var(--a-spacing-3);
 }
 
-.navds-grid__cell--xs-5 {
-  grid-column: span 5;
-}
-
-.navds-grid__cell--xs-6 {
-  grid-column: span 6;
-}
-
-.navds-grid__cell--xs-7 {
-  grid-column: span 7;
-}
-
-.navds-grid__cell--xs-8 {
-  grid-column: span 8;
-}
-
-.navds-grid__cell--xs-9 {
-  grid-column: span 9;
-}
-
-.navds-grid__cell--xs-10 {
-  grid-column: span 10;
-}
-
-.navds-grid__cell--xs-11 {
-  grid-column: span 11;
-}
-
-.navds-grid__cell--xs-12 {
-  grid-column: span 12;
-}
-
-@media (min-width: 448px) {
-  .navds-grid__cell--sm-1 {
-    grid-column: span 1;
-  }
-
-  .navds-grid__cell--sm-2 {
-    grid-column: span 2;
-  }
-
-  .navds-grid__cell--sm-3 {
-    grid-column: span 3;
-  }
-
-  .navds-grid__cell--sm-4 {
-    grid-column: span 4;
-  }
-
-  .navds-grid__cell--sm-5 {
-    grid-column: span 5;
-  }
-
-  .navds-grid__cell--sm-6 {
-    grid-column: span 6;
-  }
-
-  .navds-grid__cell--sm-7 {
-    grid-column: span 7;
-  }
-
-  .navds-grid__cell--sm-8 {
-    grid-column: span 8;
-  }
-
-  .navds-grid__cell--sm-9 {
-    grid-column: span 9;
-  }
-
-  .navds-grid__cell--sm-10 {
-    grid-column: span 10;
-  }
-
-  .navds-grid__cell--sm-11 {
-    grid-column: span 11;
-  }
-
-  .navds-grid__cell--sm-12 {
-    grid-column: span 12;
-  }
-}
-
-@media (min-width: 648px) {
-  .navds-grid__cell--md-1 {
-    grid-column: span 1;
-  }
-
-  .navds-grid__cell--md-2 {
-    grid-column: span 2;
-  }
-
-  .navds-grid__cell--md-3 {
-    grid-column: span 3;
-  }
-
-  .navds-grid__cell--md-4 {
-    grid-column: span 4;
-  }
-
-  .navds-grid__cell--md-5 {
-    grid-column: span 5;
-  }
-
-  .navds-grid__cell--md-6 {
-    grid-column: span 6;
-  }
-
-  .navds-grid__cell--md-7 {
-    grid-column: span 7;
-  }
-
-  .navds-grid__cell--md-8 {
-    grid-column: span 8;
-  }
-
-  .navds-grid__cell--md-9 {
-    grid-column: span 9;
-  }
-
-  .navds-grid__cell--md-10 {
-    grid-column: span 10;
-  }
-
-  .navds-grid__cell--md-11 {
-    grid-column: span 11;
-  }
-
-  .navds-grid__cell--md-12 {
-    grid-column: span 12;
-  }
-}
-
-@media (min-width: 960px) {
-  .navds-grid__cell--lg-1 {
-    grid-column: span 1;
-  }
-
-  .navds-grid__cell--lg-2 {
-    grid-column: span 2;
-  }
-
-  .navds-grid__cell--lg-3 {
-    grid-column: span 3;
-  }
-
-  .navds-grid__cell--lg-4 {
-    grid-column: span 4;
-  }
-
-  .navds-grid__cell--lg-5 {
-    grid-column: span 5;
-  }
-
-  .navds-grid__cell--lg-6 {
-    grid-column: span 6;
-  }
-
-  .navds-grid__cell--lg-7 {
-    grid-column: span 7;
-  }
-
-  .navds-grid__cell--lg-8 {
-    grid-column: span 8;
-  }
-
-  .navds-grid__cell--lg-9 {
-    grid-column: span 9;
-  }
-
-  .navds-grid__cell--lg-10 {
-    grid-column: span 10;
-  }
-
-  .navds-grid__cell--lg-11 {
-    grid-column: span 11;
-  }
-
-  .navds-grid__cell--lg-12 {
-    grid-column: span 12;
-  }
-}
-
-.navds-accordion {
-  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
-}
-
-.navds-accordion__item:focus-within {
-  position: relative;
-}
-
-/*************************
- * Header *
- *************************/
-
-.navds-accordion__header {
-  --__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
-    inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
-
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: var(--a-spacing-2);
-  padding: var(--a-spacing-3);
-  margin: 0;
-  text-align: left;
-  background: var(--ac-accordion-header-bg, var(--a-surface-transparent));
-  cursor: pointer;
-  border: none;
-  position: relative;
-  box-shadow: var(--__ac-accordion-header-shadow);
-  z-index: 1;
-}
-
-.navds-accordion__header:hover {
-  background-color: var(--ac-accordion-header-bg-hover, var(--a-surface-hover));
-  text-decoration: underline;
-  color: var(--ac-accordion-header-text-hover, inherit);
-}
-
-.navds-accordion--small .navds-accordion__header {
-  padding: var(--a-spacing-2) var(--a-spacing-3);
-}
-
-.navds-accordion--medium .navds-accordion__header {
-  padding: var(--a-spacing-3);
-}
-
-.navds-accordion--large .navds-accordion__header {
-  padding: var(--a-spacing-4) var(--a-spacing-3);
+.navds-accordion--large .navds-accordion__header {
+  padding: var(--a-spacing-4) var(--a-spacing-3);
 }
 
 .navds-accordion__item:last-child > :where(.navds-accordion__header) {
@@ -3465,10 +3062,6 @@
   color: var(--ac-textarea-text, var(--__ac-textarea-text, var(--a-text-default)));
 }
 
-.navds-textarea--counter {
-  padding-bottom: var(--a-spacing-8);
-}
-
 .navds-textarea__input::placeholder {
   color: var(--ac-textarea-placeholder, var(--__ac-textarea-placeholder, var(--a-text-subtle)));
 }
@@ -3493,19 +3086,9 @@
   padding: var(--a-spacing-1-alt);
 }
 
-.navds-form-field--small .navds-textarea--counter.navds-textarea__input {
-  padding-bottom: var(--a-spacing-7);
-}
-
 .navds-textarea__counter {
-  pointer-events: none;
+  margin-top: var(--a-spacing-05);
   color: var(--ac-textarea-counter-text, var(--__ac-textarea-counter-text, var(--a-text-subtle)));
-  font-style: italic;
-  position: absolute;
-  text-align: left;
-  left: 0.0625rem;
-  bottom: 0.0625rem;
-  padding: var(--a-spacing-1) var(--a-spacing-2);
 }
 
 .navds-textarea__counter--error {
@@ -6596,147 +6179,550 @@ button.navds-stepper__step {
   flex-shrink: 0;
 }
 
-.navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
-  flex-direction: column;
-  gap: 0;
+.navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
+  flex-direction: column;
+  gap: 0;
+}
+
+.navds-tabs__tab--small {
+  min-height: 2rem;
+  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
+}
+
+.navds-tabs__tab-icon--top,
+.navds-tabs__tab--small.navds-tabs__tab-icon--top {
+  padding: var(--a-spacing-1) var(--a-spacing-4);
+}
+
+.navds-tabs__tab svg,
+.navds-tabs__tab--small.navds-tabs__tab--icon-only svg,
+.navds-tabs__tab--small.navds-tabs__tab-icon--top svg {
+  font-size: 1.25rem;
+}
+
+.navds-tabs__tab--small svg {
+  font-size: 1rem;
+}
+
+.navds-tabs__tab--icon-only svg,
+.navds-tabs__tab-icon--top svg {
+  font-size: 1.5rem;
+}
+
+.navds-tabs__tabpanel:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-tabs__tabpanel:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+  }
+}
+
+.navds-list ul,
+.navds-list ol {
+  padding: 0;
+  margin-block: var(--a-spacing-4);
+}
+
+.navds-list--nested ul,
+.navds-list--nested ol {
+  margin-block: var(--a-spacing-2);
+}
+
+.navds-list--small ul,
+.navds-list--small ol {
+  margin-block: var(--a-spacing-3);
+}
+
+.navds-list li {
+  margin-block-end: var(--a-spacing-4);
+}
+
+.navds-list--small li {
+  margin-block-end: var(--a-spacing-3);
+}
+
+.navds-list--nested li {
+  margin-block-end: var(--a-spacing-3);
+}
+
+.navds-list:last-child > ul > li:last-child,
+.navds-list:last-child > ol > li:last-child {
+  margin-bottom: 0;
+}
+
+.navds-list ul .navds-list__item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--a-spacing-3);
+  padding-left: 0;
+}
+
+.navds-list ul .navds-list__item::marker {
+  content: none;
+}
+
+.navds-list ol .navds-list__item-marker--icon {
+  grid-column: 1 / 2;
+  display: flex;
+}
+
+.navds-list .navds-list__item-marker--bullet {
+  display: flex;
+  align-items: center;
+  height: var(--a-font-line-height-large);
+  grid-column: 1 / 2;
+  color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
+
+.navds-list--small .navds-list__item-marker--bullet {
+  height: var(--a-font-line-height-medium);
+}
+
+.navds-list__item-marker--icon {
+  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
+  display: flex;
+  align-items: center;
+  height: var(--a-font-line-height-large);
+  padding-block-end: 1px;
+}
+
+.navds-list--small .navds-list__item-marker--icon {
+  height: var(--a-font-line-height-medium);
+}
+
+.navds-list__item-marker--icon svg {
+  flex-shrink: 0;
+}
+
+.navds-list ul .navds-list__item-content {
+  grid-column: 2 / 3;
+}
+
+.navds-list ol {
+  padding-left: var(--a-spacing-2);
+  list-style: decimal;
+}
+
+.navds-list ol li {
+  padding-left: var(--a-spacing-1);
+  margin-left: var(--a-spacing-2);
+}
+
+.navds-list ol li::marker {
+  font-weight: var(--a-font-weight-bold);
+  font-size: var(--a-font-size-large);
+  color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
+  line-height: var(--a-font-line-height-large);
+}
+
+.navds-list--small ol li::marker {
+  font-size: var(--a-font-size-small);
+  line-height: var(--a-font-line-height-medium);
+}
+
+.navds-box {
+  --__ac-box-padding-xs: initial;
+  --__ac-box-padding-sm: var(--__ac-box-padding-xs);
+  --__ac-box-padding-md: var(--__ac-box-padding-sm);
+  --__ac-box-padding-lg: var(--__ac-box-padding-md);
+  --__ac-box-padding-xl: var(--__ac-box-padding-lg);
+  --__ac-box-padding-inline-xs: initial;
+  --__ac-box-padding-inline-sm: var(--__ac-box-padding-inline-xs);
+  --__ac-box-padding-inline-md: var(--__ac-box-padding-inline-sm);
+  --__ac-box-padding-inline-lg: var(--__ac-box-padding-inline-md);
+  --__ac-box-padding-inline-xl: var(--__ac-box-padding-inline-lg);
+  --__ac-box-padding-block-xs: initial;
+  --__ac-box-padding-block-sm: var(--__ac-box-padding-block-xs);
+  --__ac-box-padding-block-md: var(--__ac-box-padding-block-sm);
+  --__ac-box-padding-block-lg: var(--__ac-box-padding-block-md);
+  --__ac-box-padding-block-xl: var(--__ac-box-padding-block-lg);
+  --__ac-box-padding: var(--__ac-box-padding-xs);
+  --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
+  --__ac-box-padding-block: var(--__ac-box-padding-block-xs);
+  --__ac-box-background: initial;
+  --__ac-box-border-color: initial;
+  --__ac-box-shadow: initial;
+  --__ac-box-border-width: initial;
+  --__ac-box-border-radius-xs: initial;
+  --__ac-box-border-radius-sm: var(--__ac-box-border-radius-xs);
+  --__ac-box-border-radius-md: var(--__ac-box-border-radius-sm);
+  --__ac-box-border-radius-lg: var(--__ac-box-border-radius-md);
+  --__ac-box-border-radius-xl: var(--__ac-box-border-radius-lg);
+  --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
+
+  padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
+  padding-block: var(--__ac-box-padding-block, var(--__ac-box-padding));
+  background-color: var(--__ac-box-background);
+  border-style: solid;
+  border-color: var(--__ac-box-border-color);
+  border-radius: var(--__ac-box-border-radius);
+  box-shadow: var(--__ac-box-shadow);
+  border-width: var(--__ac-box-border-width, 0);
+}
+
+@media (min-width: 480px) {
+  .navds-box {
+    --__ac-box-padding: var(--__ac-box-padding-sm);
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm);
+    --__ac-box-padding-block: var(--__ac-box-padding-block-sm);
+    --__ac-box-border-radius: var(--__ac-box-border-radius-sm);
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-box {
+    --__ac-box-padding: var(--__ac-box-padding-md);
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-md);
+    --__ac-box-padding-block: var(--__ac-box-padding-block-md);
+    --__ac-box-border-radius: var(--__ac-box-border-radius-md);
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-box {
+    --__ac-box-padding: var(--__ac-box-padding-lg);
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-lg);
+    --__ac-box-padding-block: var(--__ac-box-padding-block-lg);
+    --__ac-box-border-radius: var(--__ac-box-border-radius-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-box {
+    --__ac-box-padding: var(--__ac-box-padding-xl);
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-xl);
+    --__ac-box-padding-block: var(--__ac-box-padding-block-xl);
+    --__ac-box-border-radius: var(--__ac-box-border-radius-xl);
+  }
+}
+
+.navds-bleed {
+  --__ac-bleed-margin-inline-xs: initial;
+  --__ac-bleed-margin-inline-sm: var(--__ac-bleed-margin-inline-xs);
+  --__ac-bleed-margin-inline-md: var(--__ac-bleed-margin-inline-sm);
+  --__ac-bleed-margin-inline-lg: var(--__ac-bleed-margin-inline-md);
+  --__ac-bleed-margin-inline-xl: var(--__ac-bleed-margin-inline-lg);
+  --__ac-bleed-margin-block-xs: initial;
+  --__ac-bleed-margin-block-sm: var(--__ac-bleed-margin-block-xs);
+  --__ac-bleed-margin-block-md: var(--__ac-bleed-margin-block-sm);
+  --__ac-bleed-margin-block-lg: var(--__ac-bleed-margin-block-md);
+  --__ac-bleed-margin-block-xl: var(--__ac-bleed-margin-block-lg);
+
+  /** defaults */
+  --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xs);
+  --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xs);
+
+  margin-inline: var(--__ac-bleed-margin-inline);
+  margin-block: var(--__ac-bleed-margin-block);
+}
+
+.navds-bleed--padding {
+  --__ac-bleed-padding-inline-xs: initial;
+  --__ac-bleed-padding-inline-sm: var(--__ac-bleed-padding-inline-xs);
+  --__ac-bleed-padding-inline-md: var(--__ac-bleed-padding-inline-sm);
+  --__ac-bleed-padding-inline-lg: var(--__ac-bleed-padding-inline-md);
+  --__ac-bleed-padding-inline-xl: var(--__ac-bleed-padding-inline-lg);
+  --__ac-bleed-padding-block-xs: initial;
+  --__ac-bleed-padding-block-sm: var(--__ac-bleed-padding-block-xs);
+  --__ac-bleed-padding-block-md: var(--__ac-bleed-padding-block-sm);
+  --__ac-bleed-padding-block-lg: var(--__ac-bleed-padding-block-md);
+  --__ac-bleed-padding-block-xl: var(--__ac-bleed-padding-block-lg);
+
+  /** defaults */
+  --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xs);
+  --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xs);
+
+  padding-inline: var(--__ac-bleed-padding-inline);
+  padding-block: var(--__ac-bleed-padding-block);
+}
+
+@media (min-width: 480px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-sm);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-sm);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-sm);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-sm);
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-md);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-md);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-md);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-md);
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-lg);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-lg);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-lg);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xl);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xl);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xl);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xl);
+  }
+}
+
+.navds-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-height: 100lvh;
+
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  background-color: var(--__ac-page-background);
+}
+
+/* Page.Block */
+
+.navds-pageblock {
+  margin-inline: auto;
+  width: 100%;
+}
+
+.navds-page__content--grow {
+  flex-grow: 1;
 }
 
-.navds-tabs__tab--small {
-  min-height: 2rem;
-  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
+.navds-page__content--fullheight {
+  min-height: 100vh;
+  min-height: 100lvh;
 }
 
-.navds-tabs__tab-icon--top,
-.navds-tabs__tab--small.navds-tabs__tab-icon--top {
-  padding: var(--a-spacing-1) var(--a-spacing-4);
+.navds-page__content--padding {
+  padding-block-end: var(--a-spacing-8);
 }
 
-.navds-tabs__tab svg,
-.navds-tabs__tab--small.navds-tabs__tab--icon-only svg,
-.navds-tabs__tab--small.navds-tabs__tab-icon--top svg {
-  font-size: 1.25rem;
+.navds-pageblock--lg {
+  max-width: 1024px;
 }
 
-.navds-tabs__tab--small svg {
-  font-size: 1rem;
+.navds-pageblock--xl {
+  max-width: 1280px;
 }
 
-.navds-tabs__tab--icon-only svg,
-.navds-tabs__tab-icon--top svg {
-  font-size: 1.5rem;
+.navds-pageblock--2xl {
+  max-width: 1440px;
 }
 
-.navds-tabs__tabpanel:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--a-border-focus);
+.navds-pageblock--gutters {
+  padding-inline: var(--a-spacing-4);
 }
 
-@supports not selector(:focus-visible) {
-  .navds-tabs__tabpanel:focus {
-    outline: none;
-    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+@media (min-width: 1024px) {
+  .navds-pageblock--gutters {
+    padding-inline: var(--a-spacing-12);
   }
 }
 
-.navds-list ul,
-.navds-list ol {
-  padding: 0;
-  margin-block: var(--a-spacing-4);
+.navds-hgrid {
+  --__ac-hgrid-columns-xs: initial;
+  --__ac-hgrid-columns-sm: initial;
+  --__ac-hgrid-columns-md: initial;
+  --__ac-hgrid-columns-lg: initial;
+  --__ac-hgrid-columns-xl: initial;
+  --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
+  --__ac-hgrid-gap-xs: initial;
+  --__ac-hgrid-gap-sm: initial;
+  --__ac-hgrid-gap-md: initial;
+  --__ac-hgrid-gap-lg: initial;
+  --__ac-hgrid-gap-xl: initial;
+  --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
+  --__ac-hgrid-align: initial;
+
+  display: grid;
+  grid-template-columns: var(--__ac-hgrid-columns);
+  gap: var(--__ac-hgrid-gap);
+  align-items: var(--__ac-hgrid-align);
 }
 
-.navds-list--nested ul,
-.navds-list--nested ol {
-  margin-block: var(--a-spacing-2);
+@media (min-width: 480px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs));
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs));
+  }
 }
 
-.navds-list--small ul,
-.navds-list--small ol {
-  margin-block: var(--a-spacing-3);
+@media (min-width: 768px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)));
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs)));
+  }
 }
 
-.navds-list li {
-  margin-block-end: var(--a-spacing-4);
+@media (min-width: 1024px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(
+      --__ac-hgrid-columns-lg,
+      var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)))
+    );
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))));
+  }
 }
 
-.navds-list--small li {
-  margin-block-end: var(--a-spacing-3);
+@media (min-width: 1280px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(
+      --__ac-hgrid-columns-xl,
+      var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
+    );
+    --__ac-hgrid-gap: var(
+      --__ac-hgrid-gap-xl,
+      var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
+    );
+  }
 }
 
-.navds-list--nested li {
-  margin-block-end: var(--a-spacing-3);
+.navds-stack {
+  --__ac-stack-wrap: initial;
+  --__ac-stack-gap-xs: initial;
+  --__ac-stack-gap-sm: var(--__ac-stack-gap-xs);
+  --__ac-stack-gap-md: var(--__ac-stack-gap-sm);
+  --__ac-stack-gap-lg: var(--__ac-stack-gap-md);
+  --__ac-stack-gap-xl: var(--__ac-stack-gap-lg);
+  --__ac-stack-gap: var(--__ac-stack-gap-xs);
+  --__ac-stack-justify-xs: initial;
+  --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
+  --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
+  --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
+  --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
+  --__ac-stack-justify: var(--__ac-stack-justify-xs);
+  --__ac-stack-align-xs: initial;
+  --__ac-stack-align-sm: var(--__ac-stack-align-xs);
+  --__ac-stack-align-md: var(--__ac-stack-align-sm);
+  --__ac-stack-align-lg: var(--__ac-stack-align-md);
+  --__ac-stack-align-xl: var(--__ac-stack-align-lg);
+  --__ac-stack-align: var(--__ac-stack-align-xs);
+  --__ac-stack-direction-xs: initial;
+  --__ac-stack-direction-sm: var(--__ac-stack-direction-xs);
+  --__ac-stack-direction-md: var(--__ac-stack-direction-sm);
+  --__ac-stack-direction-lg: var(--__ac-stack-direction-md);
+  --__ac-stack-direction-xl: var(--__ac-stack-direction-lg);
+  --__ac-stack-direction: var(--__ac-stack-direction-xs);
+
+  gap: var(--__ac-stack-gap);
+  display: flex;
+  align-items: var(--__ac-stack-align);
+  justify-content: var(--__ac-stack-justify);
+  flex-flow: var(--__ac-stack-direction) var(--__ac-stack-wrap);
 }
 
-.navds-list:last-child > ul > li:last-child,
-.navds-list:last-child > ol > li:last-child {
-  margin-bottom: 0;
+.navds-stack__spacer {
+  flex: 1;
+  justify-self: stretch;
+  align-self: stretch;
 }
 
-.navds-list ul .navds-list__item {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: var(--a-spacing-3);
-  padding-left: 0;
+.navds-stack > .navds-stack__spacer {
+  margin-block-start: calc(var(--__ac-stack-gap) * -1);
+  margin-inline-start: calc(var(--__ac-stack-gap) * -1);
 }
 
-.navds-list ul .navds-list__item::marker {
-  content: none;
+@media (min-width: 480px) {
+  .navds-stack {
+    --__ac-stack-gap: var(--__ac-stack-gap-sm);
+    --__ac-stack-align: var(--__ac-stack-align-sm);
+    --__ac-stack-justify: var(--__ac-stack-justify-sm);
+    --__ac-stack-direction: var(--__ac-stack-direction-sm);
+  }
 }
 
-.navds-list ol .navds-list__item-marker--icon {
-  grid-column: 1 / 2;
-  display: flex;
+@media (min-width: 768px) {
+  .navds-stack {
+    --__ac-stack-gap: var(--__ac-stack-gap-md);
+    --__ac-stack-align: var(--__ac-stack-align-md);
+    --__ac-stack-justify: var(--__ac-stack-justify-md);
+    --__ac-stack-direction: var(--__ac-stack-direction-md);
+  }
 }
 
-.navds-list .navds-list__item-marker--bullet {
-  display: flex;
-  align-items: center;
-  height: var(--a-font-line-height-large);
-  grid-column: 1 / 2;
-  color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
+@media (min-width: 1024px) {
+  .navds-stack {
+    --__ac-stack-gap: var(--__ac-stack-gap-lg);
+    --__ac-stack-align: var(--__ac-stack-align-lg);
+    --__ac-stack-justify: var(--__ac-stack-justify-lg);
+    --__ac-stack-direction: var(--__ac-stack-direction-lg);
+  }
 }
 
-.navds-list--small .navds-list__item-marker--bullet {
-  height: var(--a-font-line-height-medium);
+@media (min-width: 1280px) {
+  .navds-stack {
+    --__ac-stack-gap: var(--__ac-stack-gap-xl);
+    --__ac-stack-align: var(--__ac-stack-align-xl);
+    --__ac-stack-justify: var(--__ac-stack-justify-xl);
+    --__ac-stack-direction: var(--__ac-stack-direction-xl);
+  }
 }
 
-.navds-list__item-marker--icon {
-  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
-  display: flex;
-  align-items: center;
-  height: var(--a-font-line-height-large);
-  padding-block-end: 1px;
+@media (min-width: 480px) {
+  .navds-responsive__below--sm {
+    display: none !important;
+  }
 }
 
-.navds-list--small .navds-list__item-marker--icon {
-  height: var(--a-font-line-height-medium);
+@media (max-width: 479px) {
+  .navds-responsive__above--sm {
+    display: none !important;
+  }
 }
 
-.navds-list__item-marker--icon svg {
-  flex-shrink: 0;
+@media (min-width: 768px) {
+  .navds-responsive__below--md {
+    display: none !important;
+  }
 }
 
-.navds-list ul .navds-list__item-content {
-  grid-column: 2 / 3;
+@media (max-width: 767px) {
+  .navds-responsive__above--md {
+    display: none !important;
+  }
 }
 
-.navds-list ol {
-  padding-left: var(--a-spacing-2);
-  list-style: decimal;
+@media (min-width: 1024px) {
+  .navds-responsive__below--lg {
+    display: none !important;
+  }
 }
 
-.navds-list ol li {
-  padding-left: var(--a-spacing-1);
-  margin-left: var(--a-spacing-2);
+@media (max-width: 1023px) {
+  .navds-responsive__above--lg {
+    display: none !important;
+  }
 }
 
-.navds-list ol li::marker {
-  font-weight: var(--a-font-weight-bold);
-  font-size: var(--a-font-size-large);
-  color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
-  line-height: var(--a-font-line-height-large);
+@media (min-width: 1280px) {
+  .navds-responsive__below--xl {
+    display: none !important;
+  }
 }
 
-.navds-list--small ol li::marker {
-  font-size: var(--a-font-size-small);
-  line-height: var(--a-font-line-height-medium);
+@media (max-width: 1279px) {
+  .navds-responsive__above--xl {
+    display: none !important;
+  }
 }