@carbon/ibmdotcom-styles 2.14.0-rc.2 → 2.14.0

package/dist/ibm-dotcom-styles.css

@@ -9897,7 +9897,7 @@ screen and (prefers-contrast) {
 :host(c4d-region-item) .cds--link .cds--card__copy,
 :host(c4d-region-item) .cds--link .cds--card__heading {
   color: var(--cds-text-primary,#161616);
-  max-inline-size: to-rem(640px);
+  max-inline-size: 40rem;
   -webkit-padding-end: 10%;
   padding-inline-end: 10%
 }
@@ -13436,6 +13436,17 @@ screen and (prefers-contrast) {
     font-size: calc(2rem + 0 * (100vw - 82rem)/ 17)
   }
 }
+@media (min-width:99rem) {
+  .cds--content-group__title,
+  :host(c4d-content-group-heading) {
+    font-weight: 400;
+    font-size: 2rem
+  }
+}
+.cds--content-group__title ::slotted(h3),
+:host(c4d-content-group-heading) ::slotted(h3) {
+  font-size: inherit!important
+}
 .cds--content-group__copy,
 .cds--content-group__title,
 :host(c4d-content-group-copy),
@@ -13443,14 +13454,6 @@ screen and (prefers-contrast) {
   inline-size: 90%;
   max-inline-size: to-rem(640px)
 }
-@media (min-width:42rem) {
-  .cds--content-group__copy,
-  .cds--content-group__title,
-  :host(c4d-content-group-copy),
-  :host(c4d-content-group-heading) {
-    inline-size: calc(100% - 2rem)
-  }
-}
 .cds--content-group__copy,
 :host(c4d-content-group-copy) {
   -webkit-margin-after: 2rem;
@@ -13482,21 +13485,13 @@ screen and (prefers-contrast) {
   -webkit-padding-end: 0;
   padding-inline-end: 0
 }
-.cds--feature-card,
-.cds--feature-card-large,
 :host(c4d-feature-card),
 :host(c4d-feature-cta) {
-  position: relative;
+  display: block;
   border-width: 1px;
   border-style: solid;
   border-color: var(--cds-border-subtle-selected)
 }
-.cds--feature-card-large:hover .cds--image::before,
-.cds--feature-card-large:hover ::slotted([slot=image])::before,
-.cds--feature-card-large:hover c4d-image::before,
-.cds--feature-card:hover .cds--image::before,
-.cds--feature-card:hover ::slotted([slot=image])::before,
-.cds--feature-card:hover c4d-image::before,
 :host(c4d-feature-card):hover .cds--image::before,
 :host(c4d-feature-card):hover ::slotted([slot=image])::before,
 :host(c4d-feature-card):hover c4d-image::before,
@@ -13505,347 +13500,32 @@ screen and (prefers-contrast) {
 :host(c4d-feature-cta):hover c4d-image::before {
   opacity: .08
 }
-.cds--feature-card-large:focus-within,
-.cds--feature-card:focus-within,
 :host(c4d-feature-card):focus-within,
 :host(c4d-feature-cta):focus-within {
   border-color: transparent
 }
-@media (max-width:41.98rem) {
-  .cds--feature-card,
-  .cds--feature-card-large,
-  :host(c4d-feature-card),
-  :host(c4d-feature-cta) {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    margin-inline: -1rem
-  }
-}
-.cds--feature-card .cds--card__content,
-.cds--feature-card-large .cds--card__content,
-:host(c4d-feature-card) .cds--card__content,
-:host(c4d-feature-cta) .cds--card__content {
-  -webkit-transition: background-color 150ms cubic-bezier(.2,0,.38,.9);
-  transition: background-color 150ms cubic-bezier(.2,0,.38,.9)
-}
-.cds--feature-card .cds--image,
-.cds--feature-card ::slotted([slot=image]),
-.cds--feature-card c4d-image,
-.cds--feature-card-large .cds--image,
-.cds--feature-card-large ::slotted([slot=image]),
-.cds--feature-card-large c4d-image,
-:host(c4d-feature-card) .cds--image,
-:host(c4d-feature-card) ::slotted([slot=image]),
-:host(c4d-feature-card) c4d-image,
-:host(c4d-feature-cta) .cds--image,
-:host(c4d-feature-cta) ::slotted([slot=image]),
-:host(c4d-feature-cta) c4d-image {
-  block-size: 50%;
-  inline-size: 100%
-}
-@media screen and (prefers-reduced-motion:reduce) {
-  .cds--feature-card .cds--image::before,
-  .cds--feature-card ::slotted([slot=image])::before,
-  .cds--feature-card c4d-image::before,
-  .cds--feature-card-large .cds--image::before,
-  .cds--feature-card-large ::slotted([slot=image])::before,
-  .cds--feature-card-large c4d-image::before,
-  :host(c4d-feature-card) .cds--image::before,
-  :host(c4d-feature-card) ::slotted([slot=image])::before,
-  :host(c4d-feature-card) c4d-image::before,
-  :host(c4d-feature-cta) .cds--image::before,
-  :host(c4d-feature-cta) ::slotted([slot=image])::before,
-  :host(c4d-feature-cta) c4d-image::before {
-    position: absolute;
-    z-index: 1;
-    block-size: 100%;
-    content: "";
-    inline-size: 100%;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    opacity: 0;
-    -webkit-transition: none;
-    transition: none
-  }
-}
-.cds--feature-card .cds--image::before,
-.cds--feature-card ::slotted([slot=image])::before,
-.cds--feature-card c4d-image::before,
-.cds--feature-card-large .cds--image::before,
-.cds--feature-card-large ::slotted([slot=image])::before,
-.cds--feature-card-large c4d-image::before,
-:host(c4d-feature-card) .cds--image::before,
-:host(c4d-feature-card) ::slotted([slot=image])::before,
-:host(c4d-feature-card) c4d-image::before,
-:host(c4d-feature-cta) .cds--image::before,
-:host(c4d-feature-cta) ::slotted([slot=image])::before,
-:host(c4d-feature-cta) c4d-image::before {
-  position: absolute;
-  z-index: 1;
-  block-size: 100%;
-  content: "";
-  inline-size: 100%;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  opacity: 0;
-  -webkit-transition: opacity 150ms cubic-bezier(.2,0,.38,.9);
-  transition: opacity 150ms cubic-bezier(.2,0,.38,.9)
-}
-:host(c4d-feature-card),
-:host(c4d-feature-cta) {
-  display: block;
-  outline: 0
-}
-@media (max-width:41.98rem) {
-  :host(c4d-feature-card),
-  :host(c4d-feature-cta) {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex
-  }
-  :host(c4d-feature-card) .cds--card__wrapper,
-  :host(c4d-feature-cta) .cds--card__wrapper {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    block-size: auto;
-    min-block-size: 0
-  }
-  :host(c4d-feature-card) .cds--card__wrapper .cds--card__content,
-  :host(c4d-feature-cta) .cds--card__wrapper .cds--card__content {
-    padding: 1rem;
-    block-size: 100%
-  }
-  :host(c4d-feature-card) .cds--card--link,
-  :host(c4d-feature-cta) .cds--card--link {
-    display: block
-  }
-  .cds--feature-card .cds--card__content,
-  :host(c4d-feature-card:not([size=large])) .cds--card__content,
-  :host(c4d-feature-cta:not([size=large])) .cds--card__content {
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    padding: 1rem;
-    block-size: 100%
-  }
-  .cds--feature-card cds--card__heading,
-  :host(c4d-feature-card:not([size=large])) cds--card__heading,
-  :host(c4d-feature-cta:not([size=large])) cds--card__heading {
-    padding: 1rem;
-    margin: 0;
-    inline-size: 100%;
-    -webkit-padding-after: 2rem;
-    padding-block-end: 2rem;
-    -webkit-padding-end: 10%;
-    padding-inline-end: 10%
-  }
-  .cds--feature-card .cds--card__footer,
-  :host(c4d-feature-card:not([size=large])) .cds--card__footer,
-  :host(c4d-feature-cta:not([size=large])) .cds--card__footer {
-    -webkit-margin-before: -2rem;
-    margin-block-start: -2rem;
-    -webkit-padding-before: 0;
-    padding-block-start: 0
-  }
-  .cds--feature-card .cds--card__wrapper,
-  :host(c4d-feature-card:not([size=large])) .cds--card__wrapper,
-  :host(c4d-feature-cta:not([size=large])) .cds--card__wrapper {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    block-size: auto;
-    min-block-size: 0
-  }
-  .cds--feature-card .cds--card,
-  :host(c4d-feature-card:not([size=large])) .cds--card,
-  :host(c4d-feature-cta:not([size=large])) .cds--card {
-    display: block;
-    inset: 0;
-    -webkit-padding-before: 0;
-    padding-block-start: 0
-  }
-}
-.cds--feature-card .cds--card,
-:host(c4d-feature-card:not([size=large])) .cds--card,
-:host(c4d-feature-cta:not([size=large])) .cds--card {
-  margin: 0
-}
-.cds--feature-card .cds--card .cds--card__heading,
-.cds--feature-card .cds--card ::slotted(c4d-card-heading),
-:host(c4d-feature-card:not([size=large])) .cds--card .cds--card__heading,
-:host(c4d-feature-card:not([size=large])) .cds--card ::slotted(c4d-card-heading),
-:host(c4d-feature-cta:not([size=large])) .cds--card .cds--card__heading,
-:host(c4d-feature-cta:not([size=large])) .cds--card ::slotted(c4d-card-heading) {
-  -webkit-margin-after: 2rem;
-  margin-block-end: 2rem
-}
-.cds--feature-card .cds--card:focus-within,
-:host(c4d-feature-card:not([size=large])) .cds--card:focus-within,
-:host(c4d-feature-cta:not([size=large])) .cds--card:focus-within {
-  outline: 0;
-  outline-offset: 0
-}
-.cds--feature-card .cds--card:focus-within::before,
-:host(c4d-feature-card:not([size=large])) .cds--card:focus-within::before,
-:host(c4d-feature-cta:not([size=large])) .cds--card:focus-within::before {
-  position: absolute;
-  z-index: 1;
-  display: block;
-  border: .125rem solid var(--cds-focus,#0f62fe);
-  content: "";
-  inset: -1px;
-  outline: 1px solid var(--cds-focus-inset,#fff);
-  outline-offset: -3px
-}
-@media (max-width:41.98rem) {
-  .cds--feature-card .cds--card:focus-within::before,
-  :host(c4d-feature-card:not([size=large])) .cds--card:focus-within::before,
-  :host(c4d-feature-cta:not([size=large])) .cds--card:focus-within::before {
-    min-block-size: 292px
-  }
-}
-.cds--feature-card .cds--card__heading,
-:host(c4d-feature-card:not([size=large])) .cds--card__heading,
-:host(c4d-feature-cta:not([size=large])) .cds--card__heading {
-  -webkit-margin-after: 2rem;
-  margin-block-end: 2rem
-}
-.cds--feature-card .cds--card__wrapper,
-:host(c4d-feature-card:not([size=large])) .cds--card__wrapper,
-:host(c4d-feature-cta:not([size=large])) .cds--card__wrapper {
-  block-size: 50%;
-  inline-size: 100%
-}
-.cds--feature-card .cds--card__wrapper .cds--card__content,
-:host(c4d-feature-card:not([size=large])) .cds--card__wrapper .cds--card__content,
-:host(c4d-feature-cta:not([size=large])) .cds--card__wrapper .cds--card__content {
-  block-size: auto;
-  min-block-size: 100%
-}
-.cds--feature-card .cds--image,
-.cds--feature-card ::slotted([slot=image]),
-.cds--feature-card c4d-image,
-:host(c4d-feature-card:not([size=large])) .cds--image,
-:host(c4d-feature-card:not([size=large])) ::slotted([slot=image]),
-:host(c4d-feature-card:not([size=large])) c4d-image,
-:host(c4d-feature-cta:not([size=large])) .cds--image,
-:host(c4d-feature-cta:not([size=large])) ::slotted([slot=image]),
-:host(c4d-feature-cta:not([size=large])) c4d-image {
-  z-index: 0
-}
 @media (min-width:42rem) {
-  .cds--feature-card .cds--card,
-  :host(c4d-feature-card:not([size=large])) .cds--card,
-  :host(c4d-feature-cta:not([size=large])) .cds--card {
+  .cds--content-group__copy,
+  .cds--content-group__title,
+  :host(c4d-content-group-copy),
+  :host(c4d-content-group-heading) {
+    inline-size: calc(100% - 2rem)
+  }
+  :host(c4d-feature-card) .cds--card,
+  :host(c4d-feature-cta) .cds--card {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: row
   }
-  .cds--feature-card .cds--card__wrapper,
-  :host(c4d-feature-card:not([size=large])) .cds--card__wrapper,
-  :host(c4d-feature-cta:not([size=large])) .cds--card__wrapper {
-    block-size: auto;
-    inline-size: 50%
-  }
-  .cds--feature-card .cds--image,
-  .cds--feature-card ::slotted([slot=image]),
-  .cds--feature-card c4d-image,
-  :host(c4d-feature-card:not([size=large])) .cds--image,
-  :host(c4d-feature-card:not([size=large])) ::slotted([slot=image]),
-  :host(c4d-feature-card:not([size=large])) c4d-image,
-  :host(c4d-feature-cta:not([size=large])) .cds--image,
-  :host(c4d-feature-cta:not([size=large])) ::slotted([slot=image]),
-  :host(c4d-feature-cta:not([size=large])) c4d-image {
-    block-size: 100%;
-    inline-size: 50%;
-    -webkit-padding-before: 50%;
-    padding-block-start: 50%
-  }
 }
-.cds--feature-card .cds--feature-card__card .cds--card__footer,
-:host(c4d-feature-card:not([size=large])) .cds--feature-card__card .cds--card__footer,
-:host(c4d-feature-cta:not([size=large])) .cds--feature-card__card .cds--card__footer {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: reverse;
-  -ms-flex-direction: row-reverse;
-  flex-direction: row-reverse
-}
-.cds--feature-card .cds--feature-card__card .cds--card__footer svg,
-:host(c4d-feature-card:not([size=large])) .cds--feature-card__card .cds--card__footer svg,
-:host(c4d-feature-cta:not([size=large])) .cds--feature-card__card .cds--card__footer svg {
-  block-size: to-rem(20px);
-  inline-size: to-rem(20px)
-}
-@media (min-width:42rem) {
-  .cds--feature-card .cds--feature-card__card .cds--card__footer svg,
-  :host(c4d-feature-card:not([size=large])) .cds--feature-card__card .cds--card__footer svg,
-  :host(c4d-feature-cta:not([size=large])) .cds--feature-card__card .cds--card__footer svg {
-    block-size: 1.5rem;
-    inline-size: 1.5rem
-  }
-}
-@media (min-width:99rem) {
-  .cds--content-group__title,
-  :host(c4d-content-group-heading) {
-    font-weight: 400;
-    font-size: 2rem
-  }
-  .cds--feature-card .cds--feature-card__card .cds--card__footer svg,
-  :host(c4d-feature-card:not([size=large])) .cds--feature-card__card .cds--card__footer svg,
-  :host(c4d-feature-cta:not([size=large])) .cds--feature-card__card .cds--card__footer svg {
-    block-size: 2rem;
-    inline-size: 2rem
-  }
-}
-.cds--feature-card ::slotted(svg[slot=footer]),
-:host(c4d-feature-card:not([size=large])) ::slotted(svg[slot=footer]),
-:host(c4d-feature-cta:not([size=large])) ::slotted(svg[slot=footer]) {
-  -webkit-margin-before: auto;
-  margin-block-start: auto;
-  -webkit-margin-start: auto;
-  margin-inline-start: auto
-}
-:host(c4d-feature-card[size=large]),
-:host(c4d-feature-cta[size=large]) {
-  position: relative;
-  background-color: var(--cds-layer-01,#f4f4f4);
-  color: var(--cds-text-primary,#161616);
-  -webkit-margin-after: 2rem;
-  margin-block-end: 2rem;
-  margin-inline: 2rem/-2
-}
-@media (min-width:42rem) {
-  :host(c4d-feature-card[size=large]),
-  :host(c4d-feature-cta[size=large]) {
-    -webkit-margin-after: 4rem;
-    margin-block-end: 4rem;
-    -webkit-padding-before: 50%;
-    padding-block-start: 50%
-  }
-}
-@media (min-width:66rem) {
-  :host(c4d-feature-card[size=large]),
-  :host(c4d-feature-cta[size=large]) {
-    -webkit-margin-after: 6rem;
-    margin-block-end: 6rem
-  }
-}
-:host(c4d-feature-card[size=large]) .cds--card,
-:host(c4d-feature-cta[size=large]) .cds--card {
-  block-size: 100%
-}
-:host(c4d-feature-card[size=large]) .cds--card:focus-within,
-:host(c4d-feature-cta[size=large]) .cds--card:focus-within {
+:host(c4d-feature-card) .cds--card:focus-within,
+:host(c4d-feature-cta) .cds--card:focus-within {
   outline: 0;
   outline-offset: 0
 }
-:host(c4d-feature-card[size=large]) .cds--card:focus-within::before,
-:host(c4d-feature-cta[size=large]) .cds--card:focus-within::before {
+:host(c4d-feature-card) .cds--card:focus-within::before,
+:host(c4d-feature-cta) .cds--card:focus-within::before {
   position: absolute;
   z-index: 1;
   display: block;
@@ -13856,158 +13536,59 @@ screen and (prefers-contrast) {
   outline-offset: -3px
 }
 @media (max-width:41.98rem) {
-  .cds--feature-card .cds--feature-card__card .cds--card__footer,
-  :host(c4d-feature-card:not([size=large])) .cds--feature-card__card .cds--card__footer,
-  :host(c4d-feature-cta:not([size=large])) .cds--feature-card__card .cds--card__footer {
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: row;
-    flex-direction: row
+  :host(c4d-feature-card) .cds--card,
+  :host(c4d-feature-cta) .cds--card {
+    display: block
   }
-  :host(c4d-feature-card[size=large]) .cds--card:focus-within::before,
-  :host(c4d-feature-cta[size=large]) .cds--card:focus-within::before {
+  :host(c4d-feature-card) .cds--card:focus-within::before,
+  :host(c4d-feature-cta) .cds--card:focus-within::before {
     min-block-size: 292px
   }
 }
-:host(c4d-feature-card[size=large]) .cds--card .cds--image,
-:host(c4d-feature-card[size=large]) .cds--card ::slotted([slot=image]),
-:host(c4d-feature-card[size=large]) .cds--card c4d-image,
-:host(c4d-feature-cta[size=large]) .cds--card .cds--image,
-:host(c4d-feature-cta[size=large]) .cds--card ::slotted([slot=image]),
-:host(c4d-feature-cta[size=large]) .cds--card c4d-image {
-  z-index: 0
-}
-@media (min-width:42rem) {
-  :host(c4d-feature-card[size=large]) .cds--card,
-  :host(c4d-feature-cta[size=large]) .cds--card {
-    position: absolute;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: row;
-    flex-direction: row;
-    inset: 0
-  }
-  :host(c4d-feature-card[size=large]) .cds--card .cds--image,
-  :host(c4d-feature-card[size=large]) .cds--card ::slotted([slot=image]),
-  :host(c4d-feature-card[size=large]) .cds--card c4d-image,
-  :host(c4d-feature-cta[size=large]) .cds--card .cds--image,
-  :host(c4d-feature-cta[size=large]) .cds--card ::slotted([slot=image]),
-  :host(c4d-feature-cta[size=large]) .cds--card c4d-image {
-    block-size: 100%;
-    inline-size: 50%;
-    -webkit-padding-before: 50%;
-    padding-block-start: 50%
-  }
-}
-@media (min-width:82rem) {
-  :host(c4d-feature-card[size=large]),
-  :host(c4d-feature-cta[size=large]) {
-    -webkit-padding-before: 50%;
-    padding-block-start: 50%
-  }
-  :host(c4d-feature-card[size=large]) .cds--card .cds--image,
-  :host(c4d-feature-card[size=large]) .cds--card ::slotted([slot=image]),
-  :host(c4d-feature-card[size=large]) .cds--card c4d-image,
-  :host(c4d-feature-cta[size=large]) .cds--card .cds--image,
-  :host(c4d-feature-cta[size=large]) .cds--card ::slotted([slot=image]),
-  :host(c4d-feature-cta[size=large]) .cds--card c4d-image {
-    block-size: 100%
-  }
-}
-:host(c4d-feature-card[size=large]) .cds--card .cds--image,
-:host(c4d-feature-cta[size=large]) .cds--card .cds--image {
-  overflow-y: hidden
-}
-:host(c4d-feature-card[size=large]) .cds--card__wrapper,
-:host(c4d-feature-cta[size=large]) .cds--card__wrapper {
-  block-size: auto;
-  min-block-size: 50%
-}
-:host(c4d-feature-card[size=large]) .cds--card__wrapper::before,
-:host(c4d-feature-cta[size=large]) .cds--card__wrapper::before {
-  -webkit-padding-before: 0;
-  padding-block-start: 0
-}
-:host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__copy,
-:host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__eyebrow,
-:host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__heading,
-:host(c4d-feature-card[size=large]) .cds--card__wrapper ::slotted(c4d-card-eyebrow),
-:host(c4d-feature-card[size=large]) .cds--card__wrapper ::slotted(c4d-card-heading),
-:host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__copy,
-:host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__eyebrow,
-:host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__heading,
-:host(c4d-feature-cta[size=large]) .cds--card__wrapper ::slotted(c4d-card-eyebrow),
-:host(c4d-feature-cta[size=large]) .cds--card__wrapper ::slotted(c4d-card-heading) {
-  inline-size: 100%;
-  max-inline-size: to-rem(480px)
-}
-@media (min-width:42rem) {
-  :host(c4d-feature-card[size=large]) .cds--card__wrapper::before,
-  :host(c4d-feature-cta[size=large]) .cds--card__wrapper::before {
-    -webkit-padding-before: 50%;
-    padding-block-start: 50%
-  }
-  :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__copy,
-  :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__eyebrow,
-  :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__heading,
-  :host(c4d-feature-card[size=large]) .cds--card__wrapper ::slotted(c4d-card-eyebrow),
-  :host(c4d-feature-card[size=large]) .cds--card__wrapper ::slotted(c4d-card-heading),
-  :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__copy,
-  :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__eyebrow,
-  :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__heading,
-  :host(c4d-feature-cta[size=large]) .cds--card__wrapper ::slotted(c4d-card-eyebrow),
-  :host(c4d-feature-cta[size=large]) .cds--card__wrapper ::slotted(c4d-card-heading) {
-    inline-size: 90%
-  }
-}
-:host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__content,
-:host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__content {
-  padding: 2rem 1rem 1rem
-}
-@media (min-width:42rem) {
-  :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__content,
-  :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__content {
-    padding: 1rem
-  }
+:host(c4d-feature-card) .cds--card__image-wrapper,
+:host(c4d-feature-card) .cds--card__wrapper,
+:host(c4d-feature-cta) .cds--card__image-wrapper,
+:host(c4d-feature-cta) .cds--card__wrapper {
+  -webkit-box-flex: 1;
+  -ms-flex: 1 0 50%;
+  flex: 1 0 50%
 }
-:host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__eyebrow,
-:host(c4d-feature-card[size=large]) .cds--card__wrapper ::slotted(c4d-card-eyebrow),
-:host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__eyebrow,
-:host(c4d-feature-cta[size=large]) .cds--card__wrapper ::slotted(c4d-card-eyebrow) {
-  margin: 0 0 .5rem
+:host(c4d-feature-card) .cds--card__wrapper::after,
+:host(c4d-feature-card) .cds--card__wrapper::before,
+:host(c4d-feature-cta) .cds--card__wrapper::after,
+:host(c4d-feature-cta) .cds--card__wrapper::before {
+  display: none
 }
-:host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__heading,
-:host(c4d-feature-card[size=large]) .cds--card__wrapper ::slotted(c4d-card-heading),
-:host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__heading,
-:host(c4d-feature-cta[size=large]) .cds--card__wrapper ::slotted(c4d-card-heading) {
-  -webkit-margin-after: 2rem;
-  margin-block-end: 2rem;
-  font-size: var(--cds-heading-03-font-size,1.25rem);
-  font-weight: var(--cds-heading-03-font-weight,400);
-  line-height: var(--cds-heading-03-line-height,1.4);
-  letter-spacing: var(--cds-heading-03-letter-spacing,0)
+:host(c4d-feature-card) .cds--card__content,
+:host(c4d-feature-cta) .cds--card__content {
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  padding: 1rem;
+  aspect-ratio: 2/1;
+  -webkit-transition: background-color 150ms cubic-bezier(.2,0,.38,.9);
+  transition: background-color 150ms cubic-bezier(.2,0,.38,.9)
 }
-@media (min-width:66rem) {
-  :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__heading,
-  :host(c4d-feature-card[size=large]) .cds--card__wrapper ::slotted(c4d-card-heading),
-  :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__heading,
-  :host(c4d-feature-cta[size=large]) .cds--card__wrapper ::slotted(c4d-card-heading) {
-    font-size: var(--cds-heading-04-font-size,1.75rem);
-    font-weight: var(--cds-heading-04-font-weight,400);
-    line-height: var(--cds-heading-04-line-height,1.28572);
-    letter-spacing: var(--cds-heading-04-letter-spacing,0)
-  }
+:host(c4d-feature-card) .cds--card__eyebrow-wrapper--empty,
+:host(c4d-feature-card) .cds--card__pictogram-wrapper--empty,
+:host(c4d-feature-cta) .cds--card__eyebrow-wrapper--empty,
+:host(c4d-feature-cta) .cds--card__pictogram-wrapper--empty {
+  display: none
 }
-:host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__copy,
-:host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__copy {
+:host(c4d-feature-card) .cds--card__copy,
+:host(c4d-feature-cta) .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);
   letter-spacing: var(--cds-body-02-letter-spacing,0)
 }
 @media (min-width:42rem) {
-  :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__copy,
-  :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__copy {
+  :host(c4d-feature-card) .cds--card__content,
+  :host(c4d-feature-cta) .cds--card__content {
+    aspect-ratio: auto
+  }
+  :host(c4d-feature-card) .cds--card__copy,
+  :host(c4d-feature-cta) .cds--card__copy {
     font-size: var(--cds-body-01-font-size,.875rem);
     font-weight: var(--cds-body-01-font-weight,400);
     line-height: var(--cds-body-01-line-height,1.42857);
@@ -14015,111 +13596,64 @@ screen and (prefers-contrast) {
   }
 }
 @media (min-width:66rem) {
-  :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__copy,
-  :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__copy {
+  :host(c4d-feature-card) .cds--card__copy,
+  :host(c4d-feature-cta) .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);
     letter-spacing: var(--cds-body-02-letter-spacing,0)
   }
 }
-@media (max-width:41.98rem) {
-  :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__copy,
-  :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__copy {
-    -webkit-margin-after: 2rem;
-    margin-block-end: 2rem
-  }
-  .cds--content-block-mixed .cds--layout-1-3 .cds--link-list__list.cds--link-list__list--card,
-  :host(cds-content-block-mixed) .cds--layout-1-3 .cds--link-list__list.cds--link-list__list--card {
-    -webkit-margin-end: -1rem;
-    margin-inline-end: -1rem
-  }
-}
-@media (min-width:42rem) and (max-width:66rem) {
-  :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__copy ::slotted(*),
-  :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__copy ::slotted(*) {
-    display: -webkit-box;
-    block-size: 100%;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 8;
-    white-space: normal;
-    word-break: break-word
-  }
+:host(c4d-feature-card) ::slotted([slot=image]),
+:host(c4d-feature-card) c4d-image,
+:host(c4d-feature-cta) ::slotted([slot=image]),
+:host(c4d-feature-cta) c4d-image {
+  z-index: 0
 }
-:host(c4d-feature-card[size=large]) .cds--card__footer,
-:host(c4d-feature-cta[size=large]) .cds--card__footer {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: row;
-  flex-direction: row
+:host(c4d-feature-card) ::slotted([slot=image])::before,
+:host(c4d-feature-card) c4d-image::before,
+:host(c4d-feature-cta) ::slotted([slot=image])::before,
+:host(c4d-feature-cta) c4d-image::before {
+  position: absolute;
+  z-index: 1;
+  block-size: 100%;
+  content: "";
+  inline-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  opacity: 0;
+  -webkit-transition: opacity 150ms cubic-bezier(.2,0,.38,.9);
+  transition: opacity 150ms cubic-bezier(.2,0,.38,.9)
 }
-@media (min-width:82rem) {
-  :host(c4d-feature-card[size=large]) .cds--card__wrapper .cds--card__content,
-  :host(c4d-feature-cta[size=large]) .cds--card__wrapper .cds--card__content {
-    padding: 2rem
-  }
-  :host(c4d-feature-card[size=large]) .cds--card__footer,
-  :host(c4d-feature-cta[size=large]) .cds--card__footer {
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: reverse;
-    -ms-flex-direction: row-reverse;
-    flex-direction: row-reverse
+@media screen and (prefers-reduced-motion:reduce) {
+  :host(c4d-feature-card) ::slotted([slot=image])::before,
+  :host(c4d-feature-card) c4d-image::before,
+  :host(c4d-feature-cta) ::slotted([slot=image])::before,
+  :host(c4d-feature-cta) c4d-image::before {
+    -webkit-transition: none;
+    transition: none
   }
 }
-@media (min-width:752px) {
-  :host(c4d-feature-card[size=large]).cds--feature-card-large_no-copy-text,
-  :host(c4d-feature-cta[size=large]).cds--feature-card-large_no-copy-text {
-    -webkit-padding-before: 50%;
-    padding-block-start: 50%
-  }
-  :host(c4d-feature-card[size=large]).cds--feature-card-large_no-copy-text .cds--card,
-  :host(c4d-feature-cta[size=large]).cds--feature-card-large_no-copy-text .cds--card {
-    position: absolute;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: row;
-    flex-direction: row;
-    inset: 0
-  }
-  :host(c4d-feature-card[size=large]).cds--feature-card-large_no-copy-text .cds--card .cds--image,
-  :host(c4d-feature-card[size=large]).cds--feature-card-large_no-copy-text .cds--card__wrapper,
-  :host(c4d-feature-cta[size=large]).cds--feature-card-large_no-copy-text .cds--card .cds--image,
-  :host(c4d-feature-cta[size=large]).cds--feature-card-large_no-copy-text .cds--card__wrapper {
-    block-size: 100%;
-    inline-size: 50%
-  }
+:host(c4d-feature-card) ::slotted(c4d-card-eyebrow),
+:host(c4d-feature-card) ::slotted(c4d-card-heading),
+:host(c4d-feature-cta) ::slotted(c4d-card-eyebrow),
+:host(c4d-feature-cta) ::slotted(c4d-card-heading) {
+  inline-size: 100%
 }
-.cds--feature-card-large .cds--feature-card-large__card.cds--tile .cds--card__cta,
-.cds--feature-card-large .cds--feature-card-large__card.cds--tile .cds--card__cta:visited,
-:host(c4d-feature-card-footer) .c4d-ce--card__footer ::slotted(svg[slot=icon]) {
-  float: none;
-  -webkit-margin-before: auto;
-  margin-block-start: auto;
-  block-size: to-rem(20px);
-  inline-size: to-rem(20px);
-  font-size: var(--cds-productive-heading-05-font-size,2rem);
-  font-weight: var(--cds-productive-heading-05-font-weight,400);
-  line-height: var(--cds-productive-heading-05-line-height,1.25);
-  letter-spacing: var(--cds-productive-heading-05-letter-spacing,0)
+:host(c4d-feature-card) ::slotted(c4d-card-heading),
+:host(c4d-feature-cta) ::slotted(c4d-card-heading) {
+  -webkit-margin-after: 2rem;
+  margin-block-end: 2rem
 }
-@media (min-width:42rem) {
-  .cds--feature-card-large .cds--feature-card-large__card.cds--tile .cds--card__cta,
-  .cds--feature-card-large .cds--feature-card-large__card.cds--tile .cds--card__cta:visited,
-  :host(c4d-feature-card-footer) .c4d-ce--card__footer ::slotted(svg[slot=icon]) {
-    block-size: 1.5rem;
-    inline-size: 1.5rem
-  }
+:host(c4d-feature-card) ::slotted(c4d-card-eyebrow),
+:host(c4d-feature-cta) ::slotted(c4d-card-eyebrow) {
+  -webkit-margin-end: .5rem;
+  margin-inline-end: .5rem
 }
 :host(c4d-feature-card)[color-scheme=inverse],
 :host(c4d-feature-cta)[color-scheme=inverse] {
   border-color: var(--cds-border-inverse,#161616)
 }
-:host(c4d-feature-card)[color-scheme=inverse] .cds--card__heading,
-:host(c4d-feature-card)[color-scheme=inverse] ::slotted(c4d-card-heading),
-:host(c4d-feature-cta)[color-scheme=inverse] .cds--card__heading,
-:host(c4d-feature-cta)[color-scheme=inverse] ::slotted(c4d-card-heading) {
-  color: var(--cds-icon-inverse,#fff)
-}
 :host(c4d-feature-card)[color-scheme=inverse] ::slotted(c4d-card-heading),
 :host(c4d-feature-cta)[color-scheme=inverse] ::slotted(c4d-card-heading) {
   color: var(--cds-focus-inset,#fff)
@@ -14136,10 +13670,6 @@ screen and (prefers-contrast) {
 :host(c4d-feature-cta)[color-scheme=inverse] c4d-image::before {
   background-color: var(--cds-icon-inverse,#fff)
 }
-:host(c4d-feature-card:not([size=large]))[color-scheme=inverse] .cds--card__heading,
-:host(c4d-feature-cta:not([size=large]))[color-scheme=inverse] .cds--card__heading {
-  color: var(--cds-icon-inverse,#fff)
-}
 :host(c4d-feature-card:not([size=large]))[color-scheme=inverse] .cds--card__wrapper,
 :host(c4d-feature-cta:not([size=large]))[color-scheme=inverse] .cds--card__wrapper {
   background-color: var(--cds-background-inverse,#393939)
@@ -14158,12 +13688,10 @@ screen and (prefers-contrast) {
 }
 :host(c4d-feature-card[size=large])[color-scheme=inverse] .cds--card__wrapper .cds--card__copy,
 :host(c4d-feature-card[size=large])[color-scheme=inverse] .cds--card__wrapper .cds--card__eyebrow,
-:host(c4d-feature-card[size=large])[color-scheme=inverse] .cds--card__wrapper .cds--card__heading,
 :host(c4d-feature-card[size=large])[color-scheme=inverse] .cds--card__wrapper ::slotted(c4d-card-eyebrow),
 :host(c4d-feature-card[size=large])[color-scheme=inverse] .cds--card__wrapper ::slotted(c4d-card-heading),
 :host(c4d-feature-cta[size=large])[color-scheme=inverse] .cds--card__wrapper .cds--card__copy,
 :host(c4d-feature-cta[size=large])[color-scheme=inverse] .cds--card__wrapper .cds--card__eyebrow,
-:host(c4d-feature-cta[size=large])[color-scheme=inverse] .cds--card__wrapper .cds--card__heading,
 :host(c4d-feature-cta[size=large])[color-scheme=inverse] .cds--card__wrapper ::slotted(c4d-card-eyebrow),
 :host(c4d-feature-cta[size=large])[color-scheme=inverse] .cds--card__wrapper ::slotted(c4d-card-heading) {
   color: var(--cds-icon-inverse,#fff)
@@ -14174,9 +13702,7 @@ screen and (prefers-contrast) {
 :host(c4d-feature-cta[size=large])[color-scheme=inverse] .cds--card__wrapper ::slotted(c4d-card-eyebrow) {
   color: var(--cds-icon-inverse,#fff)
 }
-:host(c4d-feature-card[size=large])[color-scheme=inverse] .cds--card__wrapper .cds--card__heading,
 :host(c4d-feature-card[size=large])[color-scheme=inverse] .cds--card__wrapper ::slotted(c4d-card-heading),
-:host(c4d-feature-cta[size=large])[color-scheme=inverse] .cds--card__wrapper .cds--card__heading,
 :host(c4d-feature-cta[size=large])[color-scheme=inverse] .cds--card__wrapper ::slotted(c4d-card-heading) {
   color: var(--cds-icon-inverse,#fff)
 }
@@ -14192,6 +13718,17 @@ screen and (prefers-contrast) {
   justify-content: flex-end
 }
 @media (min-width:82rem) {
+  :host(c4d-feature-card)[size=large] .cds--card__content,
+  :host(c4d-feature-cta)[size=large] .cds--card__content {
+    padding: 2rem
+  }
+  :host(c4d-feature-card)[size=large] ::slotted(c4d-card-heading),
+  :host(c4d-feature-cta)[size=large] ::slotted(c4d-card-heading) {
+    font-size: var(--cds-heading-04-font-size,1.75rem);
+    font-weight: var(--cds-heading-04-font-weight,400);
+    line-height: var(--cds-heading-04-line-height,1.28572);
+    letter-spacing: var(--cds-heading-04-letter-spacing,0)
+  }
   :host(c4d-feature-card[size=large]) ::slotted(c4d-feature-card-footer) {
     -webkit-box-pack: end;
     -ms-flex-pack: end;
@@ -14207,13 +13744,21 @@ screen and (prefers-contrast) {
   -ms-flex-pack: end;
   justify-content: flex-end
 }
-@media (min-width:99rem) {
-  .cds--feature-card-large .cds--feature-card-large__card.cds--tile .cds--card__cta,
-  .cds--feature-card-large .cds--feature-card-large__card.cds--tile .cds--card__cta:visited,
-  :host(c4d-feature-card-footer) .c4d-ce--card__footer ::slotted(svg[slot=icon]) {
-    block-size: 2rem;
-    inline-size: 2rem
+@media (min-width:42rem) {
+  :host(c4d-feature-card) ::slotted(c4d-card-eyebrow),
+  :host(c4d-feature-card) ::slotted(c4d-card-heading),
+  :host(c4d-feature-cta) ::slotted(c4d-card-eyebrow),
+  :host(c4d-feature-cta) ::slotted(c4d-card-heading) {
+    inline-size: 90%
   }
+  :host(c4d-feature-card-footer),
+  :host(c4d-feature-cta-footer) {
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+    justify-content: flex-end
+  }
+}
+@media (min-width:99rem) {
   :host(c4d-feature-card-footer)[size=large] .c4d-ce--card__footer ::slotted(svg[slot=icon]),
   :host(c4d-feature-cta-footer)[size=large] .c4d-ce--card__footer ::slotted(svg[slot=icon]) {
     block-size: 4rem;
@@ -14726,25 +14271,6 @@ screen and (prefers-contrast) {
   display: grid;
   margin-inline: -1rem
 }
-@media (min-width:42rem) {
-  :host(c4d-feature-card-footer),
-  :host(c4d-feature-cta-footer) {
-    -webkit-box-pack: end;
-    -ms-flex-pack: end;
-    justify-content: flex-end
-  }
-  .cds--content-group-cards .cds--content-group__copy,
-  .cds--content-group-cards ::slotted([slot=copy]),
-  :host(c4d-content-group-cards) .cds--content-group__copy,
-  :host(c4d-content-group-cards) ::slotted([slot=copy]) {
-    -webkit-margin-after: 4rem;
-    margin-block-end: 4rem
-  }
-  .cds--content-group-cards__row {
-    grid-auto-rows: 1fr;
-    grid-template-columns: 1fr 1fr
-  }
-}
 .cds--content-group-cards-item__col,
 :host(c4d-content-group-cards-item) {
   margin-block: 2rem/2;
@@ -14798,6 +14324,17 @@ screen and (prefers-contrast) {
   padding-inline: 0 1rem
 }
 @media (min-width:42rem) {
+  .cds--content-group-cards .cds--content-group__copy,
+  .cds--content-group-cards ::slotted([slot=copy]),
+  :host(c4d-content-group-cards) .cds--content-group__copy,
+  :host(c4d-content-group-cards) ::slotted([slot=copy]) {
+    -webkit-margin-after: 4rem;
+    margin-block-end: 4rem
+  }
+  .cds--content-group-cards__row {
+    grid-auto-rows: 1fr;
+    grid-template-columns: 1fr 1fr
+  }
   .cds--pictogram-item .cds--pictogram-item__wrapper,
   :host(c4d-pictogram-item) .cds--pictogram-item__wrapper {
     display: block;
@@ -14918,6 +14455,11 @@ div.cds--content-group-pictograms .cds--content-group__title {
   padding-inline-start: 0
 }
 @media (max-width:41.98rem) {
+  .cds--content-block-mixed .cds--layout-1-3 .cds--link-list__list.cds--link-list__list--card,
+  :host(cds-content-block-mixed) .cds--layout-1-3 .cds--link-list__list.cds--link-list__list--card {
+    -webkit-margin-end: -1rem;
+    margin-inline-end: -1rem
+  }
   .cds--content-block-segmented .cds--content-group__cta-row,
   :host(c4d-content-block-segmented) .cds--content-group__cta-row {
     -webkit-margin-start: 0;