@bpmn-io/form-js-viewer 1.5.0-alpha.0 → 1.6.0

package/dist/assets/form-js.css

@@ -13,6 +13,7 @@
   --color-grey-225-10-93: hsl(225, 10%, 93%);
   --color-grey-225-10-95: hsl(225, 10%, 95%);
   --color-grey-225-10-97: hsl(225, 10%, 97%);
+  --color-grey-0-0-88: hsl(0, 0%, 88%);
   --color-blue-219-100-53: hsl(219, 99%, 53%);
   --color-blue-219-100-53-05: hsla(219, 99%, 53%, 0.5);
   --color-blue-205-100-40: hsl(205, 100%, 40%);
@@ -47,10 +48,9 @@
   --color-background-inverted: var(--cds-background-inverse, var(--color-grey-225-10-90));
   --color-background-inverted-hover: var(--cds-background-inverse-hover, var(--color-grey-225-10-93));
   --color-background-active: var(--cds-background-active, var(--color-grey-225-10-75));
-  --color-layer: var(
-    --cds-layer,
-    var(--cds-layer-01, var(--color-white))
-  );
+  --color-layer: var(--cds-layer,
+      var(--cds-layer-01, var(--color-white)));
+  --color-layer-accent: var(--cds-layer-accent, var(--color-grey-0-0-88));
   --color-icon-base: var(--cds-icon-primary, var(--color-black));
   --color-icon-inverted: var(--cds-icon-inverse, var(--color-black));
   --color-text: var(--cds-text-primary, var(--color-grey-225-10-15));
@@ -64,6 +64,7 @@
     var(--cds-border-strong-01, var(--color-grey-225-10-55))
   );
   --color-borders-group: var(--cds-border-subtle, var(--color-grey-225-10-85));
+  --color-borders-table: var(--color-borders-group);
   --color-borders-disabled: var(--cds-border-disabled, var(--color-grey-225-10-75));
   --color-borders-adornment: var(
     --cds-border-subtle,
@@ -95,6 +96,7 @@
   --border-definition: 1px solid var(--color-borders);
   --border-definition-adornment: 1px solid var(--color-borders-adornment);
   --outline-definition: 1px solid var(--cds-focus, var(--color-borders));
+  --button-warning-outline-definition: 2px solid var(--color-warning);
   --border-definition-disabled: 1px solid var(--color-borders-disabled);
   --border-definition-readonly: 1px solid var(--color-borders-readonly);
   height: 100%;
@@ -303,47 +305,47 @@
   color: var(--color-text-lighter);
 }
 
-.fjs-container .fjs-form-field-group {
+.fjs-container .fjs-form-field-grouplike {
   padding: 10px 6px 0 6px;
   margin: 0 10px;
 }
 
-.fjs-container .fjs-form-field-group .cds--grid {
+.fjs-container .fjs-form-field-grouplike .cds--grid {
   padding: 4px 16px;
 }
 
-.fjs-container .fjs-form-field-group .fjs-form-field-group .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group),
-.fjs-container .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
+.fjs-container .fjs-form-field-grouplike .fjs-form-field-grouplike .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike),
+.fjs-container .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike) {
   margin-left: -6px;
 }
 
-.fjs-container .fjs-form-field-group .fjs-form-field-group .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group),
-.fjs-container .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
+.fjs-container .fjs-form-field-grouplike .fjs-form-field-grouplike .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike),
+.fjs-container .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike) {
   margin-right: -6px;
 }
 
-.fjs-container .fjs-form-field-group .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
+.fjs-container .fjs-form-field-grouplike .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike) {
   margin-left: 11px;
 }
 
-.fjs-container .fjs-form-field-group .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
+.fjs-container .fjs-form-field-grouplike .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike) {
   margin-right: 11px;
 }
 
-.fjs-container .fjs-form-field-group.fjs-outlined {
+.fjs-container .fjs-form-field-grouplike.fjs-outlined {
   outline: solid var(--color-borders-group) 2px;
 }
 
-.fjs-container .fjs-form-field-group label {
+.fjs-container .fjs-form-field-grouplike label {
   font-size: var(--font-size-label);
 }
 
-.fjs-container .fjs-form-field-group .fjs-form-field-group .cds--grid {
+.fjs-container .fjs-form-field-grouplike .fjs-form-field-grouplike .cds--grid {
   padding-left: 2rem;
   padding-right: 2rem;
 }
 
-.fjs-container .fjs-form-field-group > label {
+.fjs-container .fjs-form-field-grouplike > label {
   font-size: var(--font-size-group);
   line-height: var(--line-height-input);
   margin-left: 7px;
@@ -782,6 +784,26 @@
   cursor: default;
 }
 
+.fjs-container .fjs-form-field-text table {
+  border-collapse: collapse;
+  width: auto;
+}
+
+.fjs-container .fjs-form-field-text table,
+.fjs-container .fjs-form-field-text th,
+.fjs-container .fjs-form-field-text td {
+  border: 1px solid var(--color-borders-table);
+  padding: 8px;
+}
+
+.fjs-container .fjs-form-field-text th {
+  font-weight: bold;
+}
+
+.fjs-container .fjs-form-field-text td {
+  white-space: nowrap;
+}
+
 .fjs-container .fjs-taglist-anchor,
 .fjs-container .fjs-select-anchor,
 .fjs-container .fjs-timepicker-anchor {
@@ -948,6 +970,211 @@
   margin: 4px 0;
 }
 
+.fjs-container .fjs-iframe {
+  margin: 4px 0;
+  width: 100%;
+  border: 1px solid var(--color-borders-readonly);
+}
+
+.fjs-container .fjs-iframe-placeholder {
+  margin: 4px 0;
+  height: 90px;
+  display: flex;
+  justify-content: center;
+  background: var(--color-background-readonly);
+  color: var(--color-text-light);
+  border: 1px solid var(--color-borders-readonly);
+}
+
+.fjs-container .fjs-iframe-placeholder .fjs-iframe-placeholder-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  overflow: hidden;
+}
+
+.fjs-container .fjs-form-field-table {
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+}
+
+.fjs-container .fjs-table-middle-container {
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  border: 1px solid var(--color-borders-group);
+  border-radius: 3px;
+}
+
+.fjs-container .fjs-table-middle-container.fjs-table-empty {
+  border: none;
+  color: var(--color-text-disabled);
+  padding-left: 16px;
+}
+
+.fjs-container .fjs-table-inner-container {
+  display: flex;
+  flex-direction: column;
+  overflow-x: auto;
+}
+
+.fjs-container .fjs-table {
+  overflow-y: auto;
+  border-collapse: collapse;
+}
+
+.fjs-container .fjs-table-head {
+  background-color: var(--color-layer-accent);
+}
+
+.fjs-container .fjs-table-th {
+  min-width: 120px;
+  cursor: pointer;
+}
+
+.fjs-container .fjs-table-th-label {
+  user-select: none;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.fjs-container .fjs-table-th:focus {
+  outline: var(--outline-definition);
+  outline-offset: -1px;
+}
+
+.fjs-container .fjs-table-th,
+.fjs-container .fjs-table-td {
+  text-align: left;
+  height: 32px;
+  padding: 0 16px;
+}
+
+.fjs-container .fjs-table-body .fjs-table-tr:not(:last-child) {
+  border-bottom: 1px solid var(--color-borders-group);
+}
+
+.fjs-container .fjs-table-nav {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  border-top: 1px solid var(--color-borders-group);
+}
+
+.fjs-container .fjs-table-nav-button {
+  border: unset;
+  background: unset;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-left: 1px solid var(--color-borders-group);
+}
+
+.fjs-container .fjs-table-nav-button:first-of-type {
+  margin-left: 16px;
+}
+
+.fjs-container .fjs-table-nav-button:focus {
+  outline: var(--outline-definition);
+  outline-offset: -1px;
+}
+
+.fjs-container .fjs-table-nav-button svg {
+  width: 16px;
+}
+
+.fjs-container .fjs-table-sort-icon-asc,
+.fjs-container .fjs-table-sort-icon-desc {
+  width: 16px;
+}
+
+.fjs-container .fjs-repeat-row-container {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+.fjs-container .fjs-repeat-row-rows {
+  flex: 1;
+  margin-right: 1rem;
+}
+
+.fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove {
+  display: flex;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  width: 32px;
+  color: var(--color-icon-base);
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove:focus-visible {
+  outline: none;
+}
+
+.fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove .fjs-repeat-row-remove-icon-container {
+  display: flex;
+  width: 24px;
+  height: 24px;
+  border-radius: 2px;
+  align-items: center;
+  justify-content: center;
+}
+
+.fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove:focus-visible .fjs-repeat-row-remove-icon-container {
+  outline: var(--button-warning-outline-definition);
+}
+
+.fjs-container .fjs-repeat-row-container:hover .fjs-repeat-render-footer-spacer {
+  width: 24px;
+}
+
+.fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove:hover,
+.fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove:focus-visible {
+  color: var(--color-warning);
+}
+
+.fjs-container .fjs-repeat-render-footer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 4px;
+}
+
+.fjs-container .fjs-repeat-render-footer.fjs-remove-allowed {
+  margin-right: 32px;
+  justify-content: space-between;
+}
+
+.fjs-container .fjs-repeat-render-footer button {
+  background: none;
+  border: none;
+  padding: 4px;
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+  color: var(--color-accent);
+  display: flex;
+  align-items: center;
+}
+
+.fjs-container .fjs-repeat-render-footer button svg {
+  margin-right: 4px;
+}
+
 /**
 * Flatpickr style adjustments
 */
@@ -998,163 +1225,135 @@
 }
 
 .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 {
@@ -1163,1498 +1362,1305 @@
 
 .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;
 }
 
 .flatpickr-calendar {