@carbon/ibmdotcom-styles 2.16.0-rc.3 → 2.16.1

package/dist/ibm-dotcom-styles.css

@@ -3755,7 +3755,7 @@ screen and (prefers-contrast) {
 :host(c4d-expressive-modal) .cds--modal-container {
   padding: 1rem;
   grid-template-rows: 1fr;
-  min-block-size: 4remto-rem(to-rem(20px))
+  min-block-size: 5.25rem
 }
 @media (min-width:42rem) {
   :host(c4d-expressive-modal) .cds--modal-container {
@@ -3852,7 +3852,7 @@ screen and (prefers-contrast) {
 :host(c4d-expressive-modal[size=full-width]) ::slotted(c4d-expressive-modal-body),
 :host(c4d-expressive-modal[size=full-width]) ::slotted(c4d-lightbox-media-viewer-body) {
   block-size: auto;
-  min-block-size: to-rem(500px);
+  min-block-size: 31.25rem;
   -webkit-padding-end: 0;
   padding-inline-end: 0
 }
@@ -4463,7 +4463,7 @@ screen and (prefers-contrast) {
   :host(c4d-button-group-item) .cds--btn,
   :host(c4d-pricing-table-header-cell-cta) .cds--btn {
     display: block;
-    border: solid #161616;
+    border: .0625rem solid #161616;
     background: #fff;
     color: #161616;
     font-weight: 600;
@@ -5613,12 +5613,10 @@ screen and (prefers-contrast) {
   -webkit-margin-start: .5rem;
   margin-inline-start: .5rem
 }
-.c4d--link-with-icon span,
-:host(c4d-callout-link-with-icon) span,
+.cds--link-with-icon span,
 :host(c4d-link-list-item) span,
 :host(c4d-link-list-item-cta) span,
 :host(c4d-link-with-icon) span,
-:host(c4d-quote-link-with-icon) span,
 :host(c4d-text-cta) span {
   -webkit-box-flex: 1;
   -ms-flex: 1;
@@ -5627,18 +5625,14 @@ screen and (prefers-contrast) {
   align-self: center;
   vertical-align: middle
 }
-.c4d--link-with-icon ::slotted(svg[slot=icon]),
-.c4d--link-with-icon svg,
-:host(c4d-callout-link-with-icon) ::slotted(svg[slot=icon]),
-:host(c4d-callout-link-with-icon) svg,
+.cds--link-with-icon ::slotted(svg[slot=icon]),
+.cds--link-with-icon svg,
 :host(c4d-link-list-item) ::slotted(svg[slot=icon]),
 :host(c4d-link-list-item) svg,
 :host(c4d-link-list-item-cta) ::slotted(svg[slot=icon]),
 :host(c4d-link-list-item-cta) svg,
 :host(c4d-link-with-icon) ::slotted(svg[slot=icon]),
 :host(c4d-link-with-icon) svg,
-:host(c4d-quote-link-with-icon) ::slotted(svg[slot=icon]),
-:host(c4d-quote-link-with-icon) svg,
 :host(c4d-text-cta) ::slotted(svg[slot=icon]),
 :host(c4d-text-cta) svg {
   display: inline;
@@ -5648,14 +5642,14 @@ screen and (prefers-contrast) {
   -webkit-margin-start: .5rem;
   margin-inline-start: .5rem
 }
-.c4d--link-with-icon.cds--link--visited,
+.cds--link-with-icon.cds--link--visited,
 :host(c4d-link-list-item).cds--link--visited,
 :host(c4d-link-list-item-cta).cds--link--visited,
 :host(c4d-link-with-icon).cds--link--visited,
 :host(c4d-text-cta).cds--link--visited {
   color: var(--cds-link-visited,#8a3ffc)
 }
-.c4d--link-with-icon.cds--link--disabled:hover,
+.cds--link-with-icon.cds--link--disabled:hover,
 :host(c4d-link-list-item).cds--link--disabled:hover,
 :host(c4d-link-list-item-cta).cds--link--disabled:hover,
 :host(c4d-link-with-icon).cds--link--disabled:hover,
@@ -5665,25 +5659,21 @@ screen and (prefers-contrast) {
   line-height: var(--cds-body-compact-02-line-height,1.375);
   letter-spacing: var(--cds-body-compact-02-letter-spacing,0)
 }
-.c4d--link-with-icon .cds--link--disabled,
-:host(c4d-callout-link-with-icon) .cds--link--disabled,
+.cds--link-with-icon .cds--link--disabled,
 :host(c4d-link-list-item) .cds--link--disabled,
 :host(c4d-link-list-item-cta) .cds--link--disabled,
 :host(c4d-link-with-icon) .cds--link--disabled,
-:host(c4d-quote-link-with-icon) .cds--link--disabled,
 :host(c4d-text-cta) .cds--link--disabled {
   color: var(--cds-text-disabled,rgba(22,22,22,.25))
 }
-.c4d--link-with-icon .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left,
-.c4d--link-with-icon.cds--link-with-icon__icon-left,
-:host(c4d-callout-link-with-icon) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left,
+.cds--link-with-icon .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left,
+.cds--link-with-icon.cds--link-with-icon__icon-left,
 :host(c4d-link-list-item) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left,
 :host(c4d-link-list-item).cds--link-with-icon__icon-left,
 :host(c4d-link-list-item-cta) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left,
 :host(c4d-link-list-item-cta).cds--link-with-icon__icon-left,
 :host(c4d-link-with-icon) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left,
 :host(c4d-link-with-icon).cds--link-with-icon__icon-left,
-:host(c4d-quote-link-with-icon) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left,
 :host(c4d-text-cta) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left,
 :host(c4d-text-cta).cds--link-with-icon__icon-left {
   display: -webkit-box;
@@ -5697,12 +5687,10 @@ screen and (prefers-contrast) {
   -ms-flex-pack: end;
   justify-content: flex-end
 }
-.c4d--link-with-icon .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
-.c4d--link-with-icon .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left svg,
-.c4d--link-with-icon.cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
-.c4d--link-with-icon.cds--link-with-icon__icon-left svg,
-:host(c4d-callout-link-with-icon) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
-:host(c4d-callout-link-with-icon) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left svg,
+.cds--link-with-icon .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
+.cds--link-with-icon .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left svg,
+.cds--link-with-icon.cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
+.cds--link-with-icon.cds--link-with-icon__icon-left svg,
 :host(c4d-link-list-item) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
 :host(c4d-link-list-item) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left svg,
 :host(c4d-link-list-item).cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
@@ -5715,8 +5703,6 @@ screen and (prefers-contrast) {
 :host(c4d-link-with-icon) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left svg,
 :host(c4d-link-with-icon).cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
 :host(c4d-link-with-icon).cds--link-with-icon__icon-left svg,
-:host(c4d-quote-link-with-icon) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
-:host(c4d-quote-link-with-icon) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left svg,
 :host(c4d-text-cta) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
 :host(c4d-text-cta) .cds--link-with-icon.cds--link-with-icon--inline-icon.cds--link-with-icon__icon-left svg,
 :host(c4d-text-cta).cds--link-with-icon__icon-left ::slotted(svg[slot=icon]),
@@ -6006,19 +5992,14 @@ screen and (prefers-contrast) {
   color: var(--cds-link-inverse,#78a9ff)
 }
 :host(c4d-callout-quote) c4d-hr {
-  margin: 1rem
+  margin: 1rem 2rem
 }
 @media (min-width:42rem) {
   :host(c4d-callout-quote) {
     margin-inline: 2rem/-2
   }
   :host(c4d-callout-quote) c4d-hr {
-    margin: 1rem 0
-  }
-}
-@media (min-width:66rem) {
-  :host(c4d-callout-quote) c4d-hr {
-    margin: 1rem .5rem
+    margin: 1rem
   }
 }
 .cds--content-block,
@@ -6087,6 +6068,7 @@ screen and (prefers-contrast) {
 }
 .cds--content-layout ::slotted([data-autoid^=c4d--card]:not([slot])),
 .cds--content-layout ::slotted([data-autoid^=c4d--tabs-]:not([slot])),
+.cds--content-layout ::slotted(c4d-content-group-cards-item:not([slot])),
 .cds--content-layout ::slotted(c4d-content-group:not([slot])),
 .cds--content-layout ::slotted(c4d-cta-block-item-row:not([slot])) {
   -webkit-margin-start: 0;
@@ -6732,7 +6714,7 @@ screen and (prefers-contrast) {
 :host(c4d-image)[heading] {
   display: block;
   margin-block: 2rem;
-  max-inline-size: to-rem(640px)
+  max-inline-size: 40rem
 }
 .c4d--image-with-caption__image {
   position: relative;
@@ -6930,7 +6912,7 @@ screen and (prefers-contrast) {
 :host(c4d-callout-with-media) ::slotted([slot=copy]),
 :host(c4d-callout-with-media) ::slotted([slot=heading]) {
   inline-size: auto;
-  max-inline-size: to-rem(640px);
+  max-inline-size: 40rem;
   -webkit-padding-end: 2rem;
   padding-inline-end: 2rem
 }
@@ -6977,7 +6959,7 @@ screen and (prefers-contrast) {
   -webkit-padding-before: .5rem;
   padding-block-start: .5rem
 }
-:host(c4d-callout-with-media-image) .cds--image__img {
+:host(c4d-callout-with-media-image) .c4d--image__img {
   max-inline-size: 100%
 }
 .cds--pricing-table-header-cell-tag,
@@ -9927,15 +9909,15 @@ screen and (prefers-contrast) {
   -webkit-padding-end: 10%;
   padding-inline-end: 10%
 }
-.cds--card .cds--card__copy:not([hidden]),
-:host(c4d-card) .cds--card__copy:not([hidden]),
-:host(c4d-card-cta) .cds--card__copy:not([hidden]),
-:host(c4d-card-group-item) .cds--card .cds--card__copy:not([hidden]),
-:host(c4d-card-group-item) .cds--card__copy:not([hidden]),
-:host(c4d-card-in-card) .cds--card__copy:not([hidden]),
-:host(c4d-content-group-cards-item) .cds--card .cds--card__copy:not([hidden]),
-:host(c4d-content-group-cards-item) .cds--card__copy:not([hidden]),
-:host(c4d-region-item) .cds--link .cds--card__copy:not([hidden]) {
+.cds--card .cds--card__copy,
+:host(c4d-card) .cds--card__copy,
+:host(c4d-card-cta) .cds--card__copy,
+:host(c4d-card-group-item) .cds--card .cds--card__copy,
+:host(c4d-card-group-item) .cds--card__copy,
+:host(c4d-card-in-card) .cds--card__copy,
+:host(c4d-content-group-cards-item) .cds--card .cds--card__copy,
+:host(c4d-content-group-cards-item) .cds--card__copy,
+:host(c4d-region-item) .cds--link .cds--card__copy {
   font-size: var(--cds-body-02-font-size,1rem);
   font-weight: var(--cds-body-02-font-weight,400);
   line-height: var(--cds-body-02-line-height,1.5);
@@ -10073,12 +10055,6 @@ screen and (prefers-contrast) {
 :host(c4d-card-in-card)[pictogram] .cds--card .cds--card__copy {
   margin-block: 2rem 0
 }
-:host(c4d-card)[pictogram] .cds--card .cds--card__copy[hidden],
-:host(c4d-card-cta)[pictogram] .cds--card .cds--card__copy[hidden],
-:host(c4d-card-group-item)[pictogram] .cds--card .cds--card__copy[hidden],
-:host(c4d-card-in-card)[pictogram] .cds--card .cds--card__copy[hidden] {
-  margin: 0
-}
 :host(c4d-card)[pictogram] .cds--card svg,
 :host(c4d-card-cta)[pictogram] .cds--card svg,
 :host(c4d-card-group-item)[pictogram] .cds--card svg,
@@ -10119,6 +10095,21 @@ screen and (prefers-contrast) {
   -ms-flex-align: start;
   align-items: flex-start
 }
+:host(c4d-card)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__content,
+:host(c4d-card-cta)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__content,
+:host(c4d-card-group-item)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__content,
+:host(c4d-card-in-card)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__content {
+  -webkit-padding-after: 4rem;
+  padding-block-end: 4rem
+}
+:host(c4d-card)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__pictogram-wrapper,
+:host(c4d-card-cta)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__pictogram-wrapper,
+:host(c4d-card-group-item)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__pictogram-wrapper,
+:host(c4d-card-in-card)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__pictogram-wrapper {
+  position: absolute;
+  inset-block-end: 1rem;
+  inset-inline-start: 1rem
+}
 :host(c4d-card)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__copy,
 :host(c4d-card-cta)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__copy,
 :host(c4d-card-group-item)[pictogram][pictogram-placement=bottom] .cds--card .cds--card__copy,
@@ -10176,6 +10167,12 @@ screen and (prefers-contrast) {
   flex-direction: column;
   gap: 1rem
 }
+:host(c4d-card) .cds--card__copy[hidden],
+:host(c4d-card-cta) .cds--card__copy[hidden],
+:host(c4d-card-group-item) .cds--card__copy[hidden],
+:host(c4d-card-in-card) .cds--card__copy[hidden] {
+  display: none!important
+}
 :host(c4d-card[aspect-ratio="1:1"]) .cds--card__wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -10382,7 +10379,7 @@ screen and (prefers-contrast) {
 :host(c4d-card-eyebrow) {
   display: block;
   inline-size: 90%;
-  max-inline-size: to-rem(640px);
+  max-inline-size: 40rem;
   font-size: var(--cds-label-02-font-size,.875rem);
   font-weight: var(--cds-label-02-font-weight,400);
   line-height: var(--cds-label-02-line-height,1.28572);
@@ -10608,7 +10605,7 @@ screen and (prefers-contrast) {
 :host(c4d-card-link-heading) {
   display: block;
   inline-size: 90%;
-  max-inline-size: to-rem(640px);
+  max-inline-size: 40rem;
   color: var(--cds-text-primary,#161616);
   -webkit-margin-after: 4rem;
   margin-block-end: 4rem
@@ -12273,6 +12270,11 @@ screen and (prefers-contrast) {
     grid-template-columns: repeat(2,1fr)
   }
 }
+@media (min-width:66rem) {
+  :host(c4d-card-group) {
+    grid-template-columns: repeat(var(--c4d--card-group--cards-in-row),1fr)
+  }
+}
 :host(c4d-card-group[with-card-in-card][grid-mode]) {
   -webkit-padding-before: 0;
   padding-block-start: 0;
@@ -12293,6 +12295,7 @@ screen and (prefers-contrast) {
   display: grid;
   border: 0;
   grid-row: span 10;
+  grid-template-columns: subgrid;
   grid-template-rows: subgrid;
   -webkit-margin-after: 2rem;
   margin-block-end: 2rem;
@@ -12330,12 +12333,9 @@ screen and (prefers-contrast) {
   row-gap: 0
 }
 :host(c4d-card-group-item) .cds--image__img {
-  block-size: to-rem(240px)
+  block-size: 15rem
 }
 @media (min-width:66rem) {
-  :host(c4d-card-group) {
-    grid-template-columns: repeat(var(--c4d--card-group--cards-in-row),1fr)
-  }
   :host(c4d-card-group-item) .cds--image {
     position: relative;
     overflow: hidden;
@@ -12509,7 +12509,7 @@ screen and (prefers-contrast) {
 }
 :host(c4d-card-section-offset) ::slotted([slot=action]) {
   inline-size: 90%;
-  max-inline-size: to-rem(640px)
+  max-inline-size: 40rem
 }
 @media (min-width:42rem) {
   :host(c4d-card-group)[grid-mode=narrow] {
@@ -13236,7 +13236,7 @@ screen and (prefers-contrast) {
   padding-block-start: 2rem
 }
 :host(c4d-content-item-row-copy) ::slotted(:not([slot])) {
-  max-inline-size: to-rem(640px)
+  max-inline-size: 40rem
 }
 :host(c4d-content-item-row-eyebrow) {
   display: block;
@@ -13279,13 +13279,13 @@ screen and (prefers-contrast) {
     -moz-column-gap: 2rem;
     column-gap: 2rem;
     grid-template-columns: repeat(8,1fr);
-    min-block-size: to-rem(306px)
+    min-block-size: 19.125rem
   }
 }
 @media (min-width:66rem) {
   :host(c4d-content-item-row)[thumbnail] {
     grid-template-columns: repeat(12,1fr);
-    min-block-size: to-rem(272px)
+    min-block-size: 17rem
   }
 }
 @media (min-width:82rem) {
@@ -13295,7 +13295,7 @@ screen and (prefers-contrast) {
     font-size: calc(1.25rem + .25 * (100vw - 82rem)/ 17)
   }
   :host(c4d-content-item-row)[thumbnail] {
-    min-block-size: to-rem(252px)
+    min-block-size: 15.75rem
   }
 }
 :host(c4d-content-item-row[thumbnail]) .cds--content-item-row__heading-wrapper {
@@ -13481,7 +13481,7 @@ screen and (prefers-contrast) {
 :host(c4d-content-group-copy),
 :host(c4d-content-group-heading) {
   inline-size: 90%;
-  max-inline-size: to-rem(640px)
+  max-inline-size: 40rem
 }
 .cds--content-group__copy,
 :host(c4d-content-group-copy) {
@@ -13827,7 +13827,7 @@ screen and (prefers-contrast) {
 }
 .cds--content-block-media .cds--feature-card,
 :host(c4d-content-block-media) .cds--feature-card {
-  max-inline-size: to-rem(640px)
+  max-inline-size: 40rem
 }
 .cds--content-block-media--g100 {
   --cds-ai-aura-end: rgba(0, 0, 0, 0);
@@ -14311,8 +14311,7 @@ screen and (prefers-contrast) {
   margin-block-end: 3rem
 }
 .cds--content-group-cards__row {
-  display: grid;
-  margin-inline: -1rem
+  display: grid
 }
 .cds--content-group-cards-item__col,
 :host(c4d-content-group-cards-item) {
@@ -14473,7 +14472,7 @@ div.cds--content-group-pictograms .cds--content-group__title {
 }
 .cds--content-block-mixed .cds--content-block__cta-col,
 :host(cds-content-block-mixed) .cds--content-block__cta-col {
-  max-inline-size: to-rem(320px)
+  max-inline-size: 20rem
 }
 @media (min-width:66rem) {
   .cds--content-block-mixed .cds--layout-1-3,
@@ -14550,7 +14549,7 @@ div.cds--content-group-pictograms .cds--content-group__title {
   margin-block-end: 0
 }
 .cds--content-block-simple__media-video {
-  max-inline-size: to-rem(640px)
+  max-inline-size: 40rem
 }
 .cds--content-block-simple__content .cds--content-item:first-of-type {
   -webkit-margin-before: 0;
@@ -20832,7 +20831,7 @@ optgroup.cds--select-optgroup:disabled {
   background-color: var(--cds-background-hover,rgba(141,141,141,.12))
 }
 :host(c4d-language-selector-desktop[size=micro]) .cds--list-box__menu {
-  inset-block-end: to-rem(3rem)
+  inset-block-end: 3rem
 }
 :host(c4d-language-selector-desktop[size=micro]) .cds--dropdown,
 :host(c4d-language-selector-desktop[size=micro]) .cds--text-input {
@@ -25447,7 +25446,7 @@ screen and (prefers-contrast) {
     margin-block-end: 1rem
   }
   .cds--language-selector__container .cds--language-selector {
-    min-inline-size: to-rem(216px)
+    min-inline-size: 13.5rem
   }
   .cds--footer--short .cds--language-selector__container .cds--language-selector {
     float: inline-end
@@ -25483,7 +25482,7 @@ screen and (prefers-contrast) {
 }
 .cds--language-selector__container .cds--list-box--up .cds--list-box__menu {
   z-index: 1;
-  inset-block-end: to-rem(47px)
+  inset-block-end: 2.9375rem
 }
 .cds--language-selector__container .cds--select-input__wrapper {
   inline-size: 100%
@@ -30682,7 +30681,7 @@ button.cds--dropdown-text:focus {
 }
 @media screen and (prefers-reduced-motion:reduce) and (min-width:42rem) {
   :host(c4d-search-with-typeahead)[leadspace-search] .react-autosuggest__suggestions-container {
-    inset-block-start: to-rem(66px)
+    inset-block-start: 4.125rem
   }
   :host(c4d-search-with-typeahead)[leadspace-search][large] {
     block-size: 3rem
@@ -30697,7 +30696,7 @@ button.cds--dropdown-text:focus {
     block-size: 3rem
   }
   :host(c4d-search-with-typeahead)[leadspace-search][large] .react-autosuggest__suggestions-container {
-    inset-block-start: to-rem(50px)
+    inset-block-start: 3.125rem
   }
 }
 @media screen and (prefers-reduced-motion:reduce) {
@@ -30707,7 +30706,7 @@ button.cds--dropdown-text:focus {
     padding-inline-start: 3rem
   }
   :host(c4d-search-with-typeahead)[leadspace-search][large] .react-autosuggest__suggestions-container {
-    inset-block-start: to-rem(50px)
+    inset-block-start: 3.125rem
   }
 }
 :host(c4d-search-with-typeahead)[leadspace-search] {
@@ -30775,7 +30774,7 @@ button.cds--dropdown-text:focus {
 }
 @media (min-width:42rem) {
   :host(c4d-search-with-typeahead)[leadspace-search] .react-autosuggest__suggestions-container {
-    inset-block-start: to-rem(66px)
+    inset-block-start: 4.125rem
   }
   :host(c4d-search-with-typeahead)[leadspace-search][large] {
     block-size: 3rem
@@ -30790,11 +30789,11 @@ button.cds--dropdown-text:focus {
     block-size: 3rem
   }
   :host(c4d-search-with-typeahead)[leadspace-search][large] .react-autosuggest__suggestions-container {
-    inset-block-start: to-rem(50px)
+    inset-block-start: 3.125rem
   }
 }
 :host(c4d-search-with-typeahead)[leadspace-search][large] .react-autosuggest__suggestions-container {
-  inset-block-start: to-rem(50px)
+  inset-block-start: 3.125rem
 }
 :host(c4d-search-with-typeahead)[sticky-search] {
   inset-block-start: 5rem
@@ -37120,8 +37119,8 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
   background-color: var(--cds-layer-01,#f4f4f4);
   -webkit-margin-before: 1rem;
   margin-block-start: 1rem;
-  -webkit-padding-after: to-rem(112px);
-  padding-block-end: to-rem(112px)
+  -webkit-padding-after: 7rem;
+  padding-block-end: 7rem
 }
 @media (min-width:42rem) {
   .cds--filter-panel__section {
@@ -37160,12 +37159,12 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
   z-index: 1;
   margin-inline: .125rem;
   outline: .125rem solid var(--cds-focus,#0f62fe);
-  -webkit-padding-start: to-rem(14px);
-  padding-inline-start: to-rem(14px)
+  -webkit-padding-start: .875rem;
+  padding-inline-start: .875rem
 }
 .cds--input-container__heading .cds--close__icon {
   position: absolute;
-  inset-block-start: to-rem(10px);
+  inset-block-start: .625rem;
   inset-inline-end: 1rem
 }
 .cds--selected-option-dropdown {
@@ -37261,10 +37260,10 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
 }
 :host(c4d-filter-panel-checkbox) {
   color: var(--cds-text-secondary,#525252);
-  -webkit-padding-after: to-rem(6px);
-  padding-block-end: to-rem(6px);
-  -webkit-padding-start: to-rem(14px);
-  padding-inline-start: to-rem(14px);
+  -webkit-padding-after: .375rem;
+  padding-block-end: .375rem;
+  -webkit-padding-start: .875rem;
+  padding-inline-start: .875rem;
   font-size: var(--cds-body-compact-01-font-size,.875rem);
   font-weight: var(--cds-body-compact-01-font-weight,400);
   line-height: var(--cds-body-compact-01-line-height,1.28572);
@@ -37319,7 +37318,7 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
 }
 :host(c4d-filter-panel-input-select-item) .cds--close__icon {
   position: absolute;
-  inset-block-start: to-rem(10px);
+  inset-block-start: .625rem;
   inset-inline-end: 1rem
 }
 :host(c4d-filter-panel-heading) {
@@ -37708,7 +37707,7 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
 .c4d--leadspace .cds--image picture,
 :host(c4d-leadspace) .cds--image picture {
   inline-size: 100%;
-  max-inline-size: to-rem(1584px)
+  max-inline-size: 99rem
 }
 .c4d--leadspace .c4d--leadspace--content__container,
 :host(c4d-leadspace) .c4d--leadspace--content__container {
@@ -38021,7 +38020,7 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
 }
 .c4d--leadspace .c4d--leadspace--centered.c4d--leadspace__section,
 :host(c4d-leadspace) .c4d--leadspace--centered.c4d--leadspace__section {
-  min-block-size: to-rem(560px);
+  min-block-size: 35rem;
   -webkit-padding-before: 0;
   padding-block-start: 0
 }
@@ -38166,7 +38165,7 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
   :host(c4d-leadspace) .c4d--leadspace--centered .c4d--leadspace__title,
   :host(c4d-leadspace) .c4d--leadspace--centered ::slotted(c4d-leadspace-heading) {
     inline-size: 90%;
-    max-inline-size: to-rem(640px)
+    max-inline-size: 40rem
   }
   .c4d--leadspace .c4d--leadspace--centered .c4d--leadspace__desc,
   :host(c4d-leadspace) .c4d--leadspace--centered .c4d--leadspace__desc {
@@ -39065,7 +39064,7 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
   }
   :host(c4d-leadspace-block) ::slotted([slot=heading]),
   :host(c4d-leadspace-block-content) ::slotted(c4d-content-block-copy) {
-    max-inline-size: to-rem(640px);
+    max-inline-size: 40rem;
     -webkit-padding-end: 2rem;
     padding-inline-end: 2rem
   }
@@ -39097,7 +39096,7 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
 .cds--leadspace-block .cds--leadspace-block__media,
 :host(c4d-leadspace-block-media) {
   display: block;
-  max-inline-size: to-rem(640px);
+  max-inline-size: 40rem;
   -webkit-padding-after: 2rem;
   padding-block-end: 2rem
 }
@@ -39125,7 +39124,7 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
 @media (min-width:42rem) {
   .cds--leadspace-block .cds--link-list,
   :host(c4d-leadspace-block-content) ::slotted(c4d-link-list) {
-    max-inline-size: to-rem(640px)
+    max-inline-size: 40rem
   }
   :host(c4d-leadspace-with-search) .cds--content-layout {
     padding: 2rem 0 3rem
@@ -40584,7 +40583,7 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
   color: var(--cds-text-primary,#161616);
   -webkit-margin-after: 0;
   margin-block-end: 0;
-  max-inline-size: to-rem(640px);
+  max-inline-size: 40rem;
   -webkit-padding-start: 0;
   padding-inline-start: 0
 }
@@ -44384,7 +44383,7 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
   display: block;
   -webkit-margin-after: 0;
   margin-block-end: 0;
-  max-inline-size: to-rem(640px);
+  max-inline-size: 40rem;
   -webkit-padding-before: 2rem;
   padding-block-start: 2rem
 }
@@ -48660,12 +48659,12 @@ strong {
 :host(c4d-table-of-contents) .cds--tableofcontents__navbar .cds--tableofcontents__item--active a::before {
   position: absolute;
   background-color: var(--cds-border-interactive,#0f62fe);
-  block-size: to-rem(20px);
+  block-size: 1.25rem;
   content: "";
   inline-size: .125rem;
-  inset-block: to-rem(14px) 0;
-  -webkit-margin-start: to-rem(-6px);
-  margin-inline-start: to-rem(-6px)
+  inset-block: .875rem 0;
+  -webkit-margin-start: -.375rem;
+  margin-inline-start: -.375rem
 }
 :host(c4d-table-of-contents) .cds--tableofcontents__item--active a,
 :host(c4d-table-of-contents) .cds--tableofcontents__item--active a:hover {
@@ -49421,12 +49420,12 @@ strong {
 .cds--tableofcontents--g100 .cds--tableofcontents__navbar .cds--tableofcontents__item--active a::before {
   position: absolute;
   background-color: var(--cds-border-interactive,#0f62fe);
-  block-size: to-rem(20px);
+  block-size: 1.25rem;
   content: "";
   inline-size: .125rem;
-  inset-block: to-rem(14px) 0;
-  -webkit-margin-start: to-rem(-6px);
-  margin-inline-start: to-rem(-6px)
+  inset-block: .875rem 0;
+  -webkit-margin-start: -.375rem;
+  margin-inline-start: -.375rem
 }
 .cds--tableofcontents--g100 .cds--tableofcontents__item--active a,
 .cds--tableofcontents--g100 .cds--tableofcontents__item--active a:hover {
@@ -49930,12 +49929,12 @@ strong {
 .cds--tableofcontents--g10 .cds--tableofcontents__navbar .cds--tableofcontents__item--active a::before {
   position: absolute;
   background-color: var(--cds-border-interactive,#0f62fe);
-  block-size: to-rem(20px);
+  block-size: 1.25rem;
   content: "";
   inline-size: .125rem;
-  inset-block: to-rem(14px) 0;
-  -webkit-margin-start: to-rem(-6px);
-  margin-inline-start: to-rem(-6px)
+  inset-block: .875rem 0;
+  -webkit-margin-start: -.375rem;
+  margin-inline-start: -.375rem
 }
 .cds--tableofcontents--g10 .cds--tableofcontents__item--active a,
 .cds--tableofcontents--g10 .cds--tableofcontents__item--active a:hover {
@@ -50522,8 +50521,8 @@ strong {
 :host(c4d-global-banner) .cds--global-banner-layout-container:where(a):active,
 :host(c4d-global-banner) .cds--global-banner-layout-container:where(a):focus {
   border-color: var(--cds-focus,#0f62fe);
-  outline: to-rem(1px) solid var(--cds-background,#fff);
-  outline-offset: to-rem(-1px)
+  outline: .0625rem solid var(--cds-background,#fff);
+  outline-offset: -.0625rem
 }
 :host(c4d-global-banner) .cds--global-banner-cta-container,
 :host(c4d-global-banner) .cds--global-banner-icon,
@@ -51321,7 +51320,7 @@ strong {
   }
   :host(c4d-content-item-copy) {
     inline-size: 90%;
-    max-inline-size: to-rem(640px)
+    max-inline-size: 40rem
   }
 }
 @media (min-width:66rem) {