@carbon/ibm-products 2.12.1 → 2.13.0

package/css/index-without-carbon-released-only.css

@@ -25,12 +25,11 @@
   font-weight: var(--cds-body-compact-02-font-weight, 400);
   line-height: var(--cds-body-compact-02-line-height, 1.375);
   letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
+  overflow: hidden auto;
   min-height: 4rem;
   padding: 0 20% 0 1rem;
   margin-bottom: 1.5rem;
   grid-row: auto;
-  overflow-x: hidden;
-  overflow-y: auto;
 }
 
 .c4p--about-modal .cds--modal-content--overflow-indicator {
@@ -219,28 +218,24 @@ p.c4p--about-modal__copyright-text:first-child {
   --cds-grid-gutter-end: calc(var(--cds-grid-gutter) / 2);
   --cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);
   display: grid;
-  width: 100%;
-  max-width: 99rem;
-  padding-right: var(--cds-grid-margin);
-  padding-left: var(--cds-grid-margin);
-  margin-right: auto;
-  margin-left: auto;
   grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
+  inline-size: 100%;
+  margin-inline: auto;
+  max-inline-size: 99rem;
+  padding-inline: var(--cds-grid-margin);
 }
 
 .cds--css-grid--full-width {
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 
 .cds--css-grid-column {
   --cds-grid-mode-start: var(--cds-grid-gutter-start);
   --cds-grid-mode-end: var(--cds-grid-gutter-end);
-  margin-right: var(--cds-grid-gutter-end);
-  margin-left: var(--cds-grid-gutter-start);
+  margin-inline: var(--cds-grid-gutter-start) var(--cds-grid-gutter-end);
 }
 [dir=rtl] .cds--css-grid-column {
-  margin-right: var(--cds-grid-gutter-start);
-  margin-left: var(--cds-grid-gutter-end);
+  margin-inline: var(--cds-grid-gutter-end) var(--cds-grid-gutter-start);
 }
 
 .cds--css-grid--narrow {
@@ -254,13 +249,11 @@ p.c4p--about-modal__copyright-text:first-child {
 
 .cds--subgrid {
   display: grid;
-  margin-right: calc(var(--cds-grid-mode-end) * -1);
-  margin-left: calc(var(--cds-grid-mode-start) * -1);
   grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
+  margin-inline: calc(var(--cds-grid-mode-start) * -1) calc(var(--cds-grid-mode-end) * -1);
 }
 [dir=rtl] .cds--subgrid {
-  margin-right: calc(var(--cds-grid-mode-start) * -1);
-  margin-left: calc(var(--cds-grid-mode-end) * -1);
+  margin-inline: calc(var(--cds-grid-mode-end) * -1) calc(var(--cds-grid-mode-start) * -1);
 }
 
 .cds--subgrid--wide {
@@ -282,11 +275,10 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 
 .cds--grid-column-hang {
-  margin-left: var(--cds-grid-column-hang);
+  margin-inline-start: var(--cds-grid-column-hang);
 }
 [dir=rtl] .cds--grid-column-hang {
-  margin-right: var(--cds-grid-column-hang);
-  margin-left: initial;
+  margin-inline: initial var(--cds-grid-column-hang);
 }
 
 .cds--col-span-0 {
@@ -2282,12 +2274,12 @@ p.c4p--about-modal__copyright-text:first-child {
 .cds--visually-hidden {
   position: absolute;
   overflow: hidden;
-  width: 1px;
-  height: 1px;
   padding: 0;
   border: 0;
   margin: -1px;
+  block-size: 1px;
   clip: rect(0, 0, 0, 0);
+  inline-size: 1px;
   visibility: inherit;
   white-space: nowrap;
 }
@@ -2578,10 +2570,7 @@ p.c4p--about-modal__copyright-text:first-child {
   border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
 }
 .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation + .c4p--side-panel__body-content {
-  margin-top: calc(
-      var(--c4p--side-panel--title-text-height) +
-        var(--c4p--side-panel--subtitle-container-height) + 3rem
-    );
+  margin-top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + 3rem);
 }
 .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-no-animation-no-action-toolbar {
   border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
@@ -2722,13 +2711,13 @@ p.c4p--about-modal__copyright-text:first-child {
 
 .c4p--create-side-panel.c4p--side-panel__container--xs .c4p--side-panel__title-text {
   width: calc(16rem - 1rem);
-  padding-right: calc((16rem * 0.2) - 1rem);
+  padding-right: calc(16rem * 0.2 - 1rem);
   margin-bottom: 0.25rem;
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--xs .c4p--side-panel__subtitle-text {
   width: calc(16rem - 1rem);
-  padding-right: calc((16rem * 0.2) - 1rem);
+  padding-right: calc(16rem * 0.2 - 1rem);
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
   color: var(--cds-text-secondary, #525252);
@@ -2736,13 +2725,13 @@ p.c4p--about-modal__copyright-text:first-child {
 
 .c4p--create-side-panel.c4p--side-panel__container--sm .c4p--side-panel__title-text {
   width: calc(20rem - 1rem);
-  padding-right: calc((20rem * 0.2) - 1rem);
+  padding-right: calc(20rem * 0.2 - 1rem);
   margin-bottom: 0.25rem;
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--sm .c4p--side-panel__subtitle-text {
   width: calc(20rem - 1rem);
-  padding-right: calc((20rem * 0.2) - 1rem);
+  padding-right: calc(20rem * 0.2 - 1rem);
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
   color: var(--cds-text-secondary, #525252);
@@ -2750,13 +2739,13 @@ p.c4p--about-modal__copyright-text:first-child {
 
 .c4p--create-side-panel.c4p--side-panel__container--md .c4p--side-panel__title-text {
   width: calc(30rem - 1rem);
-  padding-right: calc((30rem * 0.2) - 1rem);
+  padding-right: calc(30rem * 0.2 - 1rem);
   margin-bottom: 0.25rem;
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--md .c4p--side-panel__subtitle-text {
   width: calc(30rem - 1rem);
-  padding-right: calc((30rem * 0.2) - 1rem);
+  padding-right: calc(30rem * 0.2 - 1rem);
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
   color: var(--cds-text-secondary, #525252);
@@ -2764,13 +2753,13 @@ p.c4p--about-modal__copyright-text:first-child {
 
 .c4p--create-side-panel.c4p--side-panel__container--lg .c4p--side-panel__title-text {
   width: calc(40rem - 1rem);
-  padding-right: calc((40rem * 0.2) - 1rem);
+  padding-right: calc(40rem * 0.2 - 1rem);
   margin-bottom: 0.25rem;
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--lg .c4p--side-panel__subtitle-text {
   width: calc(40rem - 1rem);
-  padding-right: calc((40rem * 0.2) - 1rem);
+  padding-right: calc(40rem * 0.2 - 1rem);
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
   color: var(--cds-text-secondary, #525252);
@@ -2778,13 +2767,13 @@ p.c4p--about-modal__copyright-text:first-child {
 
 .c4p--create-side-panel.c4p--side-panel__container--2xl .c4p--side-panel__title-text {
   width: calc(75% - 1rem);
-  padding-right: calc((75% * 0.2) - 1rem);
+  padding-right: calc(75% * 0.2 - 1rem);
   margin-bottom: 0.25rem;
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--2xl .c4p--side-panel__subtitle-text {
   width: calc(75% - 1rem);
-  padding-right: calc((75% * 0.2) - 1rem);
+  padding-right: calc(75% * 0.2 - 1rem);
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
   color: var(--cds-text-secondary, #525252);
@@ -2893,7 +2882,7 @@ p.c4p--about-modal__copyright-text:first-child {
   max-height: calc(100% - 3rem + 1rem);
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container {
-  max-height: calc(100% - 3rem + (2 * 1rem));
+  max-height: calc(100% - 3rem + 2 * 1rem);
 }
 .c4p--tearsheet .c4p--tearsheet__container--lower {
   max-height: calc(100% - (3rem + 2.5rem));
@@ -2902,7 +2891,7 @@ p.c4p--about-modal__copyright-text:first-child {
   max-height: calc(100% - (3rem + 2.5rem) + 1rem);
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container--lower {
-  max-height: calc(100% - (3rem + 2.5rem) + (2 * 1rem));
+  max-height: calc(100% - (3rem + 2.5rem) + 2 * 1rem);
 }
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
   width: 100%;
@@ -2912,7 +2901,7 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 @media (min-width: 42rem) {
   .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
-    width: calc(100% - (2 * 4rem));
+    width: calc(100% - 2 * 4rem);
   }
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2.is-visible .c4p--tearsheet__container, .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3.is-visible .c4p--tearsheet__container {
@@ -4537,12 +4526,12 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--notifications-panel__container .c4p--notifications-panel__header-container .c4p--notifications-panel__do-not-disturb-toggle .cds--toggle__label-text {
   position: absolute;
   overflow: hidden;
-  width: 1px;
-  height: 1px;
   padding: 0;
   border: 0;
   margin: -1px;
+  block-size: 1px;
   clip: rect(0, 0, 0, 0);
+  inline-size: 1px;
   visibility: inherit;
   white-space: nowrap;
 }
@@ -4701,7 +4690,7 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--notifications-panel__container .c4p--notifications-panel__notification-previous:not(:first-of-type):before {
   position: absolute;
   top: 0;
-  width: calc(100% - (2 * 1rem));
+  width: calc(100% - 2 * 1rem);
   height: 1px;
   margin: 0 auto;
   background-color: var(--cds-layer-02, #ffffff);
@@ -4764,163 +4753,135 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .cds--grid {
-  margin-right: auto;
-  margin-left: auto;
-  max-width: 99rem;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  margin-inline: auto;
+  max-inline-size: 99rem;
+  padding-inline: 1rem;
 }
 @media (min-width: 42rem) {
   .cds--grid {
-    padding-right: 2rem;
-    padding-left: 2rem;
+    padding-inline: 2rem;
   }
 }
 @media (min-width: 99rem) {
   .cds--grid {
-    padding-right: 2.5rem;
-    padding-left: 2.5rem;
+    padding-inline: 2.5rem;
   }
 }
 
 @media (min-width: 99rem) {
   .cds--grid--full-width {
-    max-width: 100%;
+    max-inline-size: 100%;
   }
 }
 .cds--row {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -1rem;
-  margin-left: -1rem;
+  margin-inline: -1rem;
 }
 
 .cds--row-padding [class*=cds--col],
 .cds--col-padding {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-block: 1rem;
 }
 
 .cds--grid--condensed [class*=cds--col] {
-  padding-top: 0.03125rem;
-  padding-bottom: 0.03125rem;
+  padding-block: 0.03125rem;
 }
 
 .cds--col {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col, .cds--grid--condensed .cds--col {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col, .cds--grid--narrow .cds--col {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-sm-0 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-sm-0, .cds--grid--condensed .cds--col-sm-0 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-sm-0, .cds--grid--narrow .cds--col-sm-0 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-sm-1 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-sm-1, .cds--grid--condensed .cds--col-sm-1 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-sm-1, .cds--grid--narrow .cds--col-sm-1 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-sm-2 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-sm-2, .cds--grid--condensed .cds--col-sm-2 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-sm-2, .cds--grid--narrow .cds--col-sm-2 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-sm-3 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-sm-3, .cds--grid--condensed .cds--col-sm-3 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-sm-3, .cds--grid--narrow .cds--col-sm-3 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-sm-4 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-sm-4, .cds--grid--condensed .cds--col-sm-4 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-sm-4, .cds--grid--narrow .cds--col-sm-4 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-sm,
 .cds--col-sm--auto {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-sm, .cds--grid--condensed .cds--col-sm,
 .cds--row--condensed .cds--col-sm--auto,
 .cds--grid--condensed .cds--col-sm--auto {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-sm, .cds--grid--narrow .cds--col-sm,
 .cds--row--narrow .cds--col-sm--auto,
 .cds--grid--narrow .cds--col-sm--auto {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col,
 .cds--col-sm {
-  max-width: 100%;
   flex-basis: 0;
   flex-grow: 1;
+  max-inline-size: 100%;
 }
 
 .cds--col--auto,
 .cds--col-sm--auto {
-  width: auto;
-  max-width: 100%;
   flex: 1 0 0%;
+  inline-size: auto;
+  max-inline-size: 100%;
 }
 
 .cds--col-sm-0 {
@@ -4929,1498 +4890,1305 @@ button.c4p--add-select__global-filter-toggle--open {
 
 .cds--col-sm-1 {
   display: block;
-  max-width: 25%;
   flex: 0 0 25%;
+  max-inline-size: 25%;
 }
 
 .cds--col-sm-2 {
   display: block;
-  max-width: 50%;
   flex: 0 0 50%;
+  max-inline-size: 50%;
 }
 
 .cds--col-sm-3 {
   display: block;
-  max-width: 75%;
   flex: 0 0 75%;
+  max-inline-size: 75%;
 }
 
 .cds--col-sm-4 {
   display: block;
-  max-width: 100%;
   flex: 0 0 100%;
+  max-inline-size: 100%;
 }
 
 .cds--offset-sm-0 {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 
 .cds--offset-sm-1 {
-  margin-left: 25%;
+  margin-inline-start: 25%;
 }
 
 .cds--offset-sm-2 {
-  margin-left: 50%;
+  margin-inline-start: 50%;
 }
 
 .cds--offset-sm-3 {
-  margin-left: 75%;
+  margin-inline-start: 75%;
 }
 
 .cds--col-md-0 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-0, .cds--grid--condensed .cds--col-md-0 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-0, .cds--grid--narrow .cds--col-md-0 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-1 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-1, .cds--grid--condensed .cds--col-md-1 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-1, .cds--grid--narrow .cds--col-md-1 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-2 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-2, .cds--grid--condensed .cds--col-md-2 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-2, .cds--grid--narrow .cds--col-md-2 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-3 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-3, .cds--grid--condensed .cds--col-md-3 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-3, .cds--grid--narrow .cds--col-md-3 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-4 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-4, .cds--grid--condensed .cds--col-md-4 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-4, .cds--grid--narrow .cds--col-md-4 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-5 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-5, .cds--grid--condensed .cds--col-md-5 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-5, .cds--grid--narrow .cds--col-md-5 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-6 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-6, .cds--grid--condensed .cds--col-md-6 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-6, .cds--grid--narrow .cds--col-md-6 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-7 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-7, .cds--grid--condensed .cds--col-md-7 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-7, .cds--grid--narrow .cds--col-md-7 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-8 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-8, .cds--grid--condensed .cds--col-md-8 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-8, .cds--grid--narrow .cds--col-md-8 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md,
 .cds--col-md--auto {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md, .cds--grid--condensed .cds--col-md,
 .cds--row--condensed .cds--col-md--auto,
 .cds--grid--condensed .cds--col-md--auto {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md, .cds--grid--narrow .cds--col-md,
 .cds--row--narrow .cds--col-md--auto,
 .cds--grid--narrow .cds--col-md--auto {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 @media (min-width: 42rem) {
   .cds--col,
   .cds--col-md {
-    max-width: 100%;
     flex-basis: 0;
     flex-grow: 1;
+    max-inline-size: 100%;
   }
   .cds--col--auto,
   .cds--col-md--auto {
-    width: auto;
-    max-width: 100%;
     flex: 1 0 0%;
+    inline-size: auto;
+    max-inline-size: 100%;
   }
   .cds--col-md-0 {
     display: none;
   }
   .cds--col-md-1 {
     display: block;
-    max-width: 12.5%;
     flex: 0 0 12.5%;
+    max-inline-size: 12.5%;
   }
   .cds--col-md-2 {
     display: block;
-    max-width: 25%;
     flex: 0 0 25%;
+    max-inline-size: 25%;
   }
   .cds--col-md-3 {
     display: block;
-    max-width: 37.5%;
     flex: 0 0 37.5%;
+    max-inline-size: 37.5%;
   }
   .cds--col-md-4 {
     display: block;
-    max-width: 50%;
     flex: 0 0 50%;
+    max-inline-size: 50%;
   }
   .cds--col-md-5 {
     display: block;
-    max-width: 62.5%;
     flex: 0 0 62.5%;
+    max-inline-size: 62.5%;
   }
   .cds--col-md-6 {
     display: block;
-    max-width: 75%;
     flex: 0 0 75%;
+    max-inline-size: 75%;
   }
   .cds--col-md-7 {
     display: block;
-    max-width: 87.5%;
     flex: 0 0 87.5%;
+    max-inline-size: 87.5%;
   }
   .cds--col-md-8 {
     display: block;
-    max-width: 100%;
     flex: 0 0 100%;
+    max-inline-size: 100%;
   }
   .cds--offset-md-0 {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .cds--offset-md-1 {
-    margin-left: 12.5%;
+    margin-inline-start: 12.5%;
   }
   .cds--offset-md-2 {
-    margin-left: 25%;
+    margin-inline-start: 25%;
   }
   .cds--offset-md-3 {
-    margin-left: 37.5%;
+    margin-inline-start: 37.5%;
   }
   .cds--offset-md-4 {
-    margin-left: 50%;
+    margin-inline-start: 50%;
   }
   .cds--offset-md-5 {
-    margin-left: 62.5%;
+    margin-inline-start: 62.5%;
   }
   .cds--offset-md-6 {
-    margin-left: 75%;
+    margin-inline-start: 75%;
   }
   .cds--offset-md-7 {
-    margin-left: 87.5%;
+    margin-inline-start: 87.5%;
   }
 }
 .cds--col-lg-0 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-0, .cds--grid--condensed .cds--col-lg-0 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-0, .cds--grid--narrow .cds--col-lg-0 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-1 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-1, .cds--grid--condensed .cds--col-lg-1 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-1, .cds--grid--narrow .cds--col-lg-1 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-2 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-2, .cds--grid--condensed .cds--col-lg-2 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-2, .cds--grid--narrow .cds--col-lg-2 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-3 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-3, .cds--grid--condensed .cds--col-lg-3 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-3, .cds--grid--narrow .cds--col-lg-3 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-4 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-4, .cds--grid--condensed .cds--col-lg-4 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-4, .cds--grid--narrow .cds--col-lg-4 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-5 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-5, .cds--grid--condensed .cds--col-lg-5 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-5, .cds--grid--narrow .cds--col-lg-5 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-6 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-6, .cds--grid--condensed .cds--col-lg-6 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-6, .cds--grid--narrow .cds--col-lg-6 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-7 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-7, .cds--grid--condensed .cds--col-lg-7 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-7, .cds--grid--narrow .cds--col-lg-7 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-8 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-8, .cds--grid--condensed .cds--col-lg-8 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-8, .cds--grid--narrow .cds--col-lg-8 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-9 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-9, .cds--grid--condensed .cds--col-lg-9 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-9, .cds--grid--narrow .cds--col-lg-9 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-10 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-10, .cds--grid--condensed .cds--col-lg-10 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-10, .cds--grid--narrow .cds--col-lg-10 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-11 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-11, .cds--grid--condensed .cds--col-lg-11 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-11, .cds--grid--narrow .cds--col-lg-11 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-12 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-12, .cds--grid--condensed .cds--col-lg-12 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-12, .cds--grid--narrow .cds--col-lg-12 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-13 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-13, .cds--grid--condensed .cds--col-lg-13 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-13, .cds--grid--narrow .cds--col-lg-13 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-14 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-14, .cds--grid--condensed .cds--col-lg-14 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-14, .cds--grid--narrow .cds--col-lg-14 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-15 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-15, .cds--grid--condensed .cds--col-lg-15 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-15, .cds--grid--narrow .cds--col-lg-15 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-16 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-16, .cds--grid--condensed .cds--col-lg-16 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-16, .cds--grid--narrow .cds--col-lg-16 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg,
 .cds--col-lg--auto {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg, .cds--grid--condensed .cds--col-lg,
 .cds--row--condensed .cds--col-lg--auto,
 .cds--grid--condensed .cds--col-lg--auto {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg, .cds--grid--narrow .cds--col-lg,
 .cds--row--narrow .cds--col-lg--auto,
 .cds--grid--narrow .cds--col-lg--auto {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 @media (min-width: 66rem) {
   .cds--col,
   .cds--col-lg {
-    max-width: 100%;
     flex-basis: 0;
     flex-grow: 1;
+    max-inline-size: 100%;
   }
   .cds--col--auto,
   .cds--col-lg--auto {
-    width: auto;
-    max-width: 100%;
     flex: 1 0 0%;
+    inline-size: auto;
+    max-inline-size: 100%;
   }
   .cds--col-lg-0 {
     display: none;
   }
   .cds--col-lg-1 {
     display: block;
-    max-width: 6.25%;
     flex: 0 0 6.25%;
+    max-inline-size: 6.25%;
   }
   .cds--col-lg-2 {
     display: block;
-    max-width: 12.5%;
     flex: 0 0 12.5%;
+    max-inline-size: 12.5%;
   }
   .cds--col-lg-3 {
     display: block;
-    max-width: 18.75%;
     flex: 0 0 18.75%;
+    max-inline-size: 18.75%;
   }
   .cds--col-lg-4 {
     display: block;
-    max-width: 25%;
     flex: 0 0 25%;
+    max-inline-size: 25%;
   }
   .cds--col-lg-5 {
     display: block;
-    max-width: 31.25%;
     flex: 0 0 31.25%;
+    max-inline-size: 31.25%;
   }
   .cds--col-lg-6 {
     display: block;
-    max-width: 37.5%;
     flex: 0 0 37.5%;
+    max-inline-size: 37.5%;
   }
   .cds--col-lg-7 {
     display: block;
-    max-width: 43.75%;
     flex: 0 0 43.75%;
+    max-inline-size: 43.75%;
   }
   .cds--col-lg-8 {
     display: block;
-    max-width: 50%;
     flex: 0 0 50%;
+    max-inline-size: 50%;
   }
   .cds--col-lg-9 {
     display: block;
-    max-width: 56.25%;
     flex: 0 0 56.25%;
+    max-inline-size: 56.25%;
   }
   .cds--col-lg-10 {
     display: block;
-    max-width: 62.5%;
     flex: 0 0 62.5%;
+    max-inline-size: 62.5%;
   }
   .cds--col-lg-11 {
     display: block;
-    max-width: 68.75%;
     flex: 0 0 68.75%;
+    max-inline-size: 68.75%;
   }
   .cds--col-lg-12 {
     display: block;
-    max-width: 75%;
     flex: 0 0 75%;
+    max-inline-size: 75%;
   }
   .cds--col-lg-13 {
     display: block;
-    max-width: 81.25%;
     flex: 0 0 81.25%;
+    max-inline-size: 81.25%;
   }
   .cds--col-lg-14 {
     display: block;
-    max-width: 87.5%;
     flex: 0 0 87.5%;
+    max-inline-size: 87.5%;
   }
   .cds--col-lg-15 {
     display: block;
-    max-width: 93.75%;
     flex: 0 0 93.75%;
+    max-inline-size: 93.75%;
   }
   .cds--col-lg-16 {
     display: block;
-    max-width: 100%;
     flex: 0 0 100%;
+    max-inline-size: 100%;
   }
   .cds--offset-lg-0 {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .cds--offset-lg-1 {
-    margin-left: 6.25%;
+    margin-inline-start: 6.25%;
   }
   .cds--offset-lg-2 {
-    margin-left: 12.5%;
+    margin-inline-start: 12.5%;
   }
   .cds--offset-lg-3 {
-    margin-left: 18.75%;
+    margin-inline-start: 18.75%;
   }
   .cds--offset-lg-4 {
-    margin-left: 25%;
+    margin-inline-start: 25%;
   }
   .cds--offset-lg-5 {
-    margin-left: 31.25%;
+    margin-inline-start: 31.25%;
   }
   .cds--offset-lg-6 {
-    margin-left: 37.5%;
+    margin-inline-start: 37.5%;
   }
   .cds--offset-lg-7 {
-    margin-left: 43.75%;
+    margin-inline-start: 43.75%;
   }
   .cds--offset-lg-8 {
-    margin-left: 50%;
+    margin-inline-start: 50%;
   }
   .cds--offset-lg-9 {
-    margin-left: 56.25%;
+    margin-inline-start: 56.25%;
   }
   .cds--offset-lg-10 {
-    margin-left: 62.5%;
+    margin-inline-start: 62.5%;
   }
   .cds--offset-lg-11 {
-    margin-left: 68.75%;
+    margin-inline-start: 68.75%;
   }
   .cds--offset-lg-12 {
-    margin-left: 75%;
+    margin-inline-start: 75%;
   }
   .cds--offset-lg-13 {
-    margin-left: 81.25%;
+    margin-inline-start: 81.25%;
   }
   .cds--offset-lg-14 {
-    margin-left: 87.5%;
+    margin-inline-start: 87.5%;
   }
   .cds--offset-lg-15 {
-    margin-left: 93.75%;
+    margin-inline-start: 93.75%;
   }
 }
 .cds--col-xlg-0 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-0, .cds--grid--condensed .cds--col-xlg-0 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-0, .cds--grid--narrow .cds--col-xlg-0 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-1 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-1, .cds--grid--condensed .cds--col-xlg-1 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-1, .cds--grid--narrow .cds--col-xlg-1 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-2 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-2, .cds--grid--condensed .cds--col-xlg-2 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-2, .cds--grid--narrow .cds--col-xlg-2 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-3 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-3, .cds--grid--condensed .cds--col-xlg-3 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-3, .cds--grid--narrow .cds--col-xlg-3 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-4 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-4, .cds--grid--condensed .cds--col-xlg-4 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-4, .cds--grid--narrow .cds--col-xlg-4 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-5 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-5, .cds--grid--condensed .cds--col-xlg-5 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-5, .cds--grid--narrow .cds--col-xlg-5 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-6 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-6, .cds--grid--condensed .cds--col-xlg-6 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-6, .cds--grid--narrow .cds--col-xlg-6 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-7 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-7, .cds--grid--condensed .cds--col-xlg-7 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-7, .cds--grid--narrow .cds--col-xlg-7 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-8 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-8, .cds--grid--condensed .cds--col-xlg-8 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-8, .cds--grid--narrow .cds--col-xlg-8 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-9 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-9, .cds--grid--condensed .cds--col-xlg-9 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-9, .cds--grid--narrow .cds--col-xlg-9 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-10 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-10, .cds--grid--condensed .cds--col-xlg-10 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-10, .cds--grid--narrow .cds--col-xlg-10 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-11 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-11, .cds--grid--condensed .cds--col-xlg-11 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-11, .cds--grid--narrow .cds--col-xlg-11 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-12 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-12, .cds--grid--condensed .cds--col-xlg-12 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-12, .cds--grid--narrow .cds--col-xlg-12 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-13 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-13, .cds--grid--condensed .cds--col-xlg-13 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-13, .cds--grid--narrow .cds--col-xlg-13 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-14 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-14, .cds--grid--condensed .cds--col-xlg-14 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-14, .cds--grid--narrow .cds--col-xlg-14 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-15 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-15, .cds--grid--condensed .cds--col-xlg-15 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-15, .cds--grid--narrow .cds--col-xlg-15 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-16 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-16, .cds--grid--condensed .cds--col-xlg-16 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-16, .cds--grid--narrow .cds--col-xlg-16 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg,
 .cds--col-xlg--auto {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg, .cds--grid--condensed .cds--col-xlg,
 .cds--row--condensed .cds--col-xlg--auto,
 .cds--grid--condensed .cds--col-xlg--auto {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg, .cds--grid--narrow .cds--col-xlg,
 .cds--row--narrow .cds--col-xlg--auto,
 .cds--grid--narrow .cds--col-xlg--auto {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 @media (min-width: 82rem) {
   .cds--col,
   .cds--col-xlg {
-    max-width: 100%;
     flex-basis: 0;
     flex-grow: 1;
+    max-inline-size: 100%;
   }
   .cds--col--auto,
   .cds--col-xlg--auto {
-    width: auto;
-    max-width: 100%;
     flex: 1 0 0%;
+    inline-size: auto;
+    max-inline-size: 100%;
   }
   .cds--col-xlg-0 {
     display: none;
   }
   .cds--col-xlg-1 {
     display: block;
-    max-width: 6.25%;
     flex: 0 0 6.25%;
+    max-inline-size: 6.25%;
   }
   .cds--col-xlg-2 {
     display: block;
-    max-width: 12.5%;
     flex: 0 0 12.5%;
+    max-inline-size: 12.5%;
   }
   .cds--col-xlg-3 {
     display: block;
-    max-width: 18.75%;
     flex: 0 0 18.75%;
+    max-inline-size: 18.75%;
   }
   .cds--col-xlg-4 {
     display: block;
-    max-width: 25%;
     flex: 0 0 25%;
+    max-inline-size: 25%;
   }
   .cds--col-xlg-5 {
     display: block;
-    max-width: 31.25%;
     flex: 0 0 31.25%;
+    max-inline-size: 31.25%;
   }
   .cds--col-xlg-6 {
     display: block;
-    max-width: 37.5%;
     flex: 0 0 37.5%;
+    max-inline-size: 37.5%;
   }
   .cds--col-xlg-7 {
     display: block;
-    max-width: 43.75%;
     flex: 0 0 43.75%;
+    max-inline-size: 43.75%;
   }
   .cds--col-xlg-8 {
     display: block;
-    max-width: 50%;
     flex: 0 0 50%;
+    max-inline-size: 50%;
   }
   .cds--col-xlg-9 {
     display: block;
-    max-width: 56.25%;
     flex: 0 0 56.25%;
+    max-inline-size: 56.25%;
   }
   .cds--col-xlg-10 {
     display: block;
-    max-width: 62.5%;
     flex: 0 0 62.5%;
+    max-inline-size: 62.5%;
   }
   .cds--col-xlg-11 {
     display: block;
-    max-width: 68.75%;
     flex: 0 0 68.75%;
+    max-inline-size: 68.75%;
   }
   .cds--col-xlg-12 {
     display: block;
-    max-width: 75%;
     flex: 0 0 75%;
+    max-inline-size: 75%;
   }
   .cds--col-xlg-13 {
     display: block;
-    max-width: 81.25%;
     flex: 0 0 81.25%;
+    max-inline-size: 81.25%;
   }
   .cds--col-xlg-14 {
     display: block;
-    max-width: 87.5%;
     flex: 0 0 87.5%;
+    max-inline-size: 87.5%;
   }
   .cds--col-xlg-15 {
     display: block;
-    max-width: 93.75%;
     flex: 0 0 93.75%;
+    max-inline-size: 93.75%;
   }
   .cds--col-xlg-16 {
     display: block;
-    max-width: 100%;
     flex: 0 0 100%;
+    max-inline-size: 100%;
   }
   .cds--offset-xlg-0 {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .cds--offset-xlg-1 {
-    margin-left: 6.25%;
+    margin-inline-start: 6.25%;
   }
   .cds--offset-xlg-2 {
-    margin-left: 12.5%;
+    margin-inline-start: 12.5%;
   }
   .cds--offset-xlg-3 {
-    margin-left: 18.75%;
+    margin-inline-start: 18.75%;
   }
   .cds--offset-xlg-4 {
-    margin-left: 25%;
+    margin-inline-start: 25%;
   }
   .cds--offset-xlg-5 {
-    margin-left: 31.25%;
+    margin-inline-start: 31.25%;
   }
   .cds--offset-xlg-6 {
-    margin-left: 37.5%;
+    margin-inline-start: 37.5%;
   }
   .cds--offset-xlg-7 {
-    margin-left: 43.75%;
+    margin-inline-start: 43.75%;
   }
   .cds--offset-xlg-8 {
-    margin-left: 50%;
+    margin-inline-start: 50%;
   }
   .cds--offset-xlg-9 {
-    margin-left: 56.25%;
+    margin-inline-start: 56.25%;
   }
   .cds--offset-xlg-10 {
-    margin-left: 62.5%;
+    margin-inline-start: 62.5%;
   }
   .cds--offset-xlg-11 {
-    margin-left: 68.75%;
+    margin-inline-start: 68.75%;
   }
   .cds--offset-xlg-12 {
-    margin-left: 75%;
+    margin-inline-start: 75%;
   }
   .cds--offset-xlg-13 {
-    margin-left: 81.25%;
+    margin-inline-start: 81.25%;
   }
   .cds--offset-xlg-14 {
-    margin-left: 87.5%;
+    margin-inline-start: 87.5%;
   }
   .cds--offset-xlg-15 {
-    margin-left: 93.75%;
+    margin-inline-start: 93.75%;
   }
 }
 .cds--col-max-0 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-0, .cds--grid--condensed .cds--col-max-0 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-0, .cds--grid--narrow .cds--col-max-0 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-1 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-1, .cds--grid--condensed .cds--col-max-1 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-1, .cds--grid--narrow .cds--col-max-1 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-2 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-2, .cds--grid--condensed .cds--col-max-2 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-2, .cds--grid--narrow .cds--col-max-2 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-3 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-3, .cds--grid--condensed .cds--col-max-3 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-3, .cds--grid--narrow .cds--col-max-3 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-4 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-4, .cds--grid--condensed .cds--col-max-4 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-4, .cds--grid--narrow .cds--col-max-4 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-5 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-5, .cds--grid--condensed .cds--col-max-5 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-5, .cds--grid--narrow .cds--col-max-5 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-6 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-6, .cds--grid--condensed .cds--col-max-6 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-6, .cds--grid--narrow .cds--col-max-6 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-7 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-7, .cds--grid--condensed .cds--col-max-7 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-7, .cds--grid--narrow .cds--col-max-7 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-8 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-8, .cds--grid--condensed .cds--col-max-8 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-8, .cds--grid--narrow .cds--col-max-8 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-9 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-9, .cds--grid--condensed .cds--col-max-9 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-9, .cds--grid--narrow .cds--col-max-9 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-10 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-10, .cds--grid--condensed .cds--col-max-10 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-10, .cds--grid--narrow .cds--col-max-10 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-11 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-11, .cds--grid--condensed .cds--col-max-11 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-11, .cds--grid--narrow .cds--col-max-11 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-12 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-12, .cds--grid--condensed .cds--col-max-12 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-12, .cds--grid--narrow .cds--col-max-12 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-13 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-13, .cds--grid--condensed .cds--col-max-13 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-13, .cds--grid--narrow .cds--col-max-13 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-14 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-14, .cds--grid--condensed .cds--col-max-14 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-14, .cds--grid--narrow .cds--col-max-14 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-15 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-15, .cds--grid--condensed .cds--col-max-15 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-15, .cds--grid--narrow .cds--col-max-15 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-16 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-16, .cds--grid--condensed .cds--col-max-16 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-16, .cds--grid--narrow .cds--col-max-16 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max,
 .cds--col-max--auto {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max, .cds--grid--condensed .cds--col-max,
 .cds--row--condensed .cds--col-max--auto,
 .cds--grid--condensed .cds--col-max--auto {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max, .cds--grid--narrow .cds--col-max,
 .cds--row--narrow .cds--col-max--auto,
 .cds--grid--narrow .cds--col-max--auto {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 @media (min-width: 99rem) {
   .cds--col,
   .cds--col-max {
-    max-width: 100%;
     flex-basis: 0;
     flex-grow: 1;
+    max-inline-size: 100%;
   }
   .cds--col--auto,
   .cds--col-max--auto {
-    width: auto;
-    max-width: 100%;
     flex: 1 0 0%;
+    inline-size: auto;
+    max-inline-size: 100%;
   }
   .cds--col-max-0 {
     display: none;
   }
   .cds--col-max-1 {
     display: block;
-    max-width: 6.25%;
     flex: 0 0 6.25%;
+    max-inline-size: 6.25%;
   }
   .cds--col-max-2 {
     display: block;
-    max-width: 12.5%;
     flex: 0 0 12.5%;
+    max-inline-size: 12.5%;
   }
   .cds--col-max-3 {
     display: block;
-    max-width: 18.75%;
     flex: 0 0 18.75%;
+    max-inline-size: 18.75%;
   }
   .cds--col-max-4 {
     display: block;
-    max-width: 25%;
     flex: 0 0 25%;
+    max-inline-size: 25%;
   }
   .cds--col-max-5 {
     display: block;
-    max-width: 31.25%;
     flex: 0 0 31.25%;
+    max-inline-size: 31.25%;
   }
   .cds--col-max-6 {
     display: block;
-    max-width: 37.5%;
     flex: 0 0 37.5%;
+    max-inline-size: 37.5%;
   }
   .cds--col-max-7 {
     display: block;
-    max-width: 43.75%;
     flex: 0 0 43.75%;
+    max-inline-size: 43.75%;
   }
   .cds--col-max-8 {
     display: block;
-    max-width: 50%;
     flex: 0 0 50%;
+    max-inline-size: 50%;
   }
   .cds--col-max-9 {
     display: block;
-    max-width: 56.25%;
     flex: 0 0 56.25%;
+    max-inline-size: 56.25%;
   }
   .cds--col-max-10 {
     display: block;
-    max-width: 62.5%;
     flex: 0 0 62.5%;
+    max-inline-size: 62.5%;
   }
   .cds--col-max-11 {
     display: block;
-    max-width: 68.75%;
     flex: 0 0 68.75%;
+    max-inline-size: 68.75%;
   }
   .cds--col-max-12 {
     display: block;
-    max-width: 75%;
     flex: 0 0 75%;
+    max-inline-size: 75%;
   }
   .cds--col-max-13 {
     display: block;
-    max-width: 81.25%;
     flex: 0 0 81.25%;
+    max-inline-size: 81.25%;
   }
   .cds--col-max-14 {
     display: block;
-    max-width: 87.5%;
     flex: 0 0 87.5%;
+    max-inline-size: 87.5%;
   }
   .cds--col-max-15 {
     display: block;
-    max-width: 93.75%;
     flex: 0 0 93.75%;
+    max-inline-size: 93.75%;
   }
   .cds--col-max-16 {
     display: block;
-    max-width: 100%;
     flex: 0 0 100%;
+    max-inline-size: 100%;
   }
   .cds--offset-max-0 {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .cds--offset-max-1 {
-    margin-left: 6.25%;
+    margin-inline-start: 6.25%;
   }
   .cds--offset-max-2 {
-    margin-left: 12.5%;
+    margin-inline-start: 12.5%;
   }
   .cds--offset-max-3 {
-    margin-left: 18.75%;
+    margin-inline-start: 18.75%;
   }
   .cds--offset-max-4 {
-    margin-left: 25%;
+    margin-inline-start: 25%;
   }
   .cds--offset-max-5 {
-    margin-left: 31.25%;
+    margin-inline-start: 31.25%;
   }
   .cds--offset-max-6 {
-    margin-left: 37.5%;
+    margin-inline-start: 37.5%;
   }
   .cds--offset-max-7 {
-    margin-left: 43.75%;
+    margin-inline-start: 43.75%;
   }
   .cds--offset-max-8 {
-    margin-left: 50%;
+    margin-inline-start: 50%;
   }
   .cds--offset-max-9 {
-    margin-left: 56.25%;
+    margin-inline-start: 56.25%;
   }
   .cds--offset-max-10 {
-    margin-left: 62.5%;
+    margin-inline-start: 62.5%;
   }
   .cds--offset-max-11 {
-    margin-left: 68.75%;
+    margin-inline-start: 68.75%;
   }
   .cds--offset-max-12 {
-    margin-left: 75%;
+    margin-inline-start: 75%;
   }
   .cds--offset-max-13 {
-    margin-left: 81.25%;
+    margin-inline-start: 81.25%;
   }
   .cds--offset-max-14 {
-    margin-left: 87.5%;
+    margin-inline-start: 87.5%;
   }
   .cds--offset-max-15 {
-    margin-left: 93.75%;
+    margin-inline-start: 93.75%;
   }
 }
 .cds--no-gutter,
 .cds--row.cds--no-gutter [class*=cds--col] {
-  padding-right: 0;
-  padding-left: 0;
+  padding-inline: 0;
 }
 
 .cds--no-gutter--start,
 .cds--row.cds--no-gutter--start [class*=cds--col] {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .cds--no-gutter--end,
 .cds--row.cds--no-gutter--end [class*=cds--col] {
-  padding-right: 0;
+  padding-inline-end: 0;
 }
 
 .cds--hang--start {
-  padding-left: 1rem;
+  padding-inline-start: 1rem;
 }
 
 .cds--hang--end {
-  padding-right: 1rem;
+  padding-inline-end: 1rem;
 }
 
 .c4p--action-bar.c4p--action-bar {