@adobe/react-spectrum 3.47.1 → 3.47.2

package/dist/private/card_vars.css

@@ -1,38 +1,38 @@
 .t4AxIG_i18nFontFamily {
   font-synthesis: weight;
   font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
-}
 
-.t4AxIG_i18nFontFamily:lang(ar) {
-  font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
-}
+  &:lang(ar) {
+    font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+  }
 
-.t4AxIG_i18nFontFamily:lang(he) {
-  font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
-}
+  &:lang(he) {
+    font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+  }
 
-.t4AxIG_i18nFontFamily:lang(zh) {
-  font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
-}
+  &:lang(zh) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+  }
 
-.t4AxIG_i18nFontFamily:lang(zh-Hans) {
-  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
-}
+  &:lang(zh-Hans) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  }
 
-.t4AxIG_i18nFontFamily:lang(zh-Hant) {
-  font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
-}
+  &:lang(zh-Hant) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+  }
 
-.t4AxIG_i18nFontFamily:lang(zh-SG), .t4AxIG_i18nFontFamily:lang(zh-CN) {
-  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
-}
+  &:lang(zh-SG), &:lang(zh-CN) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  }
 
-.t4AxIG_i18nFontFamily:lang(ko) {
-  font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
-}
+  &:lang(ko) {
+    font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+  }
 
-.t4AxIG_i18nFontFamily:lang(ja) {
-  font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+  &:lang(ja) {
+    font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+  }
 }
 
 .t4AxIG_spectrum-FocusRing-ring {
@@ -41,42 +41,50 @@
   --spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
   --spectrum-focus-ring-border-size: 0px;
   --spectrum-focus-ring-color: var(--spectrum-high-contrast-focus-ring-color, var(--spectrum-alias-focus-ring-color, var(--spectrum-alias-focus-color)));
-}
 
-.t4AxIG_spectrum-FocusRing-ring:after {
-  border-radius: calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));
-  content: "";
-  margin: calc(-1 * var(--spectrum-focus-ring-border-size));
-  pointer-events: none;
-  transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out,
+  &:after {
+    border-radius: calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));
+    content: "";
+    margin: calc(-1 * var(--spectrum-focus-ring-border-size));
+    pointer-events: none;
+    transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out,
       margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
-  display: block;
-  position: absolute;
-  inset: 0;
+    display: block;
+    position: absolute;
+    inset: 0;
+  }
 }
 
-.t4AxIG_spectrum-FocusRing.t4AxIG_focus-ring:after {
-  margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
-  box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
+.t4AxIG_spectrum-FocusRing {
+  &.t4AxIG_focus-ring {
+    &:after {
+      margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
+      box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
+    }
+  }
 }
 
-.t4AxIG_spectrum-FocusRing--quiet:after {
-  border-radius: 0;
-}
+.t4AxIG_spectrum-FocusRing--quiet {
+  &:after {
+    border-radius: 0;
+  }
 
-.t4AxIG_spectrum-FocusRing--quiet.t4AxIG_focus-ring:after {
-  margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size))
+  &.t4AxIG_focus-ring {
+    &:after {
+      margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size))
         0;
-  box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
+      box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
+    }
+  }
 }
 
 @media (forced-colors: active) {
   .t4AxIG_spectrum-FocusRing, .t4AxIG_spectrum-FocusRing-ring, .t4AxIG_spectrum-FocusRing--quiet {
     --spectrum-high-contrast-focus-ring-color: Highlight;
-  }
 
-  :is(.t4AxIG_spectrum-FocusRing, .t4AxIG_spectrum-FocusRing-ring, .t4AxIG_spectrum-FocusRing--quiet):after {
-    forced-color-adjust: none;
+    &:after {
+      forced-color-adjust: none;
+    }
   }
 }
 
@@ -88,62 +96,64 @@
   user-select: none;
   block-size: 100%;
   text-decoration: none;
-}
 
-.t4AxIG_spectrum-Card:focus {
-  outline: none;
-}
+  &:focus {
+    outline: none;
+  }
 
-.t4AxIG_spectrum-Card .t4AxIG_spectrum-Card-heading {
-  margin: 0;
-}
+  & .t4AxIG_spectrum-Card-heading {
+    margin: 0;
+  }
 
-.t4AxIG_spectrum-Card .t4AxIG_spectrum-Card-checkboxWrapper {
-  inline-size: var(--spectrum-quickactions-height, var(--spectrum-global-dimension-size-500));
-  block-size: var(--spectrum-quickactions-height, var(--spectrum-global-dimension-size-500));
-  border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
-  visibility: hidden;
-  display: grid;
-  position: absolute;
-  inset-block-start: var(--spectrum-card-checkbox-margin, var(--spectrum-global-dimension-size-200));
-  inset-inline-start: var(--spectrum-card-checkbox-margin, var(--spectrum-global-dimension-size-200));
-}
+  & .t4AxIG_spectrum-Card-checkboxWrapper {
+    inline-size: var(--spectrum-quickactions-height, var(--spectrum-global-dimension-size-500));
+    block-size: var(--spectrum-quickactions-height, var(--spectrum-global-dimension-size-500));
+    border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
+    visibility: hidden;
+    display: grid;
+    position: absolute;
+    inset-block-start: var(--spectrum-card-checkbox-margin, var(--spectrum-global-dimension-size-200));
+    inset-inline-start: var(--spectrum-card-checkbox-margin, var(--spectrum-global-dimension-size-200));
+  }
 
-.t4AxIG_spectrum-Card .t4AxIG_spectrum-Card-checkbox {
-  padding: 4px calc(50% - calc(var(--spectrum-checkbox-box-size, var(--spectrum-global-dimension-size-175)) / 2)) 4px
+  & .t4AxIG_spectrum-Card-checkbox {
+    padding: 4px calc(50% - calc(var(--spectrum-checkbox-box-size, var(--spectrum-global-dimension-size-175)) / 2)) 4px
       calc(50% - calc(var(--spectrum-checkbox-box-size, var(--spectrum-global-dimension-size-175)) / 2));
-}
+  }
 
-:is(.t4AxIG_spectrum-Card.t4AxIG_is-selected, .t4AxIG_spectrum-Card.t4AxIG_focus-ring, .t4AxIG_spectrum-Card.t4AxIG_is-hovered) .t4AxIG_spectrum-Card-checkboxWrapper {
-  visibility: visible;
-  opacity: 1;
-  pointer-events: all;
+  &.t4AxIG_is-selected, &.t4AxIG_focus-ring, &.t4AxIG_is-hovered {
+    & .t4AxIG_spectrum-Card-checkboxWrapper {
+      visibility: visible;
+      opacity: 1;
+      pointer-events: all;
+    }
+  }
 }
 
 .t4AxIG_spectrum-Card-grid {
   position: relative;
-}
 
-.t4AxIG_spectrum-Card-grid:after, .t4AxIG_spectrum-Card-grid .t4AxIG_spectrum-Card-decoration {
-  pointer-events: none;
+  &:after, & .t4AxIG_spectrum-Card-decoration {
+    pointer-events: none;
+  }
 }
 
 .t4AxIG_spectrum-Card-image {
   grid-area: t4AxIG_preview;
-}
 
-.t4AxIG_spectrum-Card-image img {
-  -webkit-user-drag: none;
-  user-drag: none;
+  & img {
+    -webkit-user-drag: none;
+    user-drag: none;
+  }
 }
 
 .t4AxIG_spectrum-Card-illustration {
   grid-area: t4AxIG_preview;
-}
 
-.t4AxIG_spectrum-Card-illustration svg {
-  -webkit-user-drag: none;
-  user-drag: none;
+  & svg {
+    -webkit-user-drag: none;
+    user-drag: none;
+  }
 }
 
 .t4AxIG_spectrum-Card-avatar {
@@ -171,863 +181,877 @@
   display: none;
 }
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-checkboxWrapper {
-  z-index: 3;
-}
+.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--default {
+  & .t4AxIG_spectrum-Card-checkboxWrapper {
+    z-index: 3;
+  }
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--default:after {
-  z-index: 2;
-  pointer-events: none;
-}
+  &:after {
+    z-index: 2;
+    pointer-events: none;
+  }
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--default {
   border-width: var(--spectrum-card-border-size, var(--spectrum-alias-border-size-thin));
   border-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
   border-style: solid;
   position: relative;
-}
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--default:before, .t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--default:after {
-  content: " ";
-  border-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  block-size: 100%;
-  inline-size: 100%;
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-}
+  &:before, &:after {
+    content: " ";
+    border-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+    block-size: 100%;
+    inline-size: 100%;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-grid {
-  grid-template-columns: var(--spectrum-card-body-padding-left, var(--spectrum-global-dimension-size-300)) minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500),
+  & .t4AxIG_spectrum-Card-grid {
+    grid-template-columns: var(--spectrum-card-body-padding-left, var(--spectrum-global-dimension-size-300)) minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500),
         1fr)
       minmax(0, auto) var(--spectrum-card-body-padding-right, var(--spectrum-global-dimension-size-300));
-  grid-template-rows: minmax(var(--spectrum-card-coverphoto-height, var(--spectrum-global-dimension-size-1700)), 1fr) var(--spectrum-global-dimension-size-300)
+    grid-template-rows: minmax(var(--spectrum-card-coverphoto-height, var(--spectrum-global-dimension-size-1700)), 1fr) var(--spectrum-global-dimension-size-300)
       minmax(var(--spectrum-actionbutton-height, var(--spectrum-alias-single-line-height)), auto) auto var(--spectrum-card-body-padding-bottom, var(--spectrum-global-dimension-size-250));
-  grid-template-areas: "t4AxIG_preview t4AxIG_preview t4AxIG_preview t4AxIG_preview t4AxIG_preview"
-                       ". . . . ."
-                       ". t4AxIG_title t4AxIG_detail . ."
-                       ". t4AxIG_content t4AxIG_content t4AxIG_content ."
-                       ". . . . .";
-  block-size: 100%;
-  display: grid;
-}
-
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-grid:before {
-  content: " ";
-  border-start-start-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  border-start-end-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  grid-area: t4AxIG_preview;
-  block-size: 100%;
-  inline-size: 100%;
-}
+    grid-template-areas: "t4AxIG_preview t4AxIG_preview t4AxIG_preview t4AxIG_preview t4AxIG_preview"
+                         ". . . . ."
+                         ". t4AxIG_title t4AxIG_detail . ."
+                         ". t4AxIG_content t4AxIG_content t4AxIG_content ."
+                         ". . . . .";
+    block-size: 100%;
+    display: grid;
+
+    &:before {
+      content: " ";
+      border-start-start-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+      border-start-end-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+      grid-area: t4AxIG_preview;
+      block-size: 100%;
+      inline-size: 100%;
+    }
+  }
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--default.t4AxIG_spectrum-Card--noPreview .t4AxIG_spectrum-Card-grid {
-  grid-template-columns: var(--spectrum-card-body-padding-left, var(--spectrum-global-dimension-size-300)) minmax(0, auto) 1fr minmax(0, auto)
+  &.t4AxIG_spectrum-Card--noPreview .t4AxIG_spectrum-Card-grid {
+    grid-template-columns: var(--spectrum-card-body-padding-left, var(--spectrum-global-dimension-size-300)) minmax(0, auto) 1fr minmax(0, auto)
       var(--spectrum-card-body-padding-right, var(--spectrum-global-dimension-size-300));
-  grid-template-rows: var(--spectrum-global-dimension-size-300) auto 1fr var(--spectrum-card-body-padding-bottom, var(--spectrum-global-dimension-size-250));
-  grid-template-areas: ". . . . ."
-                       ". t4AxIG_title t4AxIG_detail . ."
-                       ". t4AxIG_content t4AxIG_content t4AxIG_content ."
-                       ". . . . .";
-  display: grid;
-}
-
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--default.t4AxIG_spectrum-Card--noPreview .t4AxIG_spectrum-Card-grid .t4AxIG_spectrum-Card-avatar {
-  display: none;
-}
+    grid-template-rows: var(--spectrum-global-dimension-size-300) auto 1fr var(--spectrum-card-body-padding-bottom, var(--spectrum-global-dimension-size-250));
+    grid-template-areas: ". . . . ."
+                         ". t4AxIG_title t4AxIG_detail . ."
+                         ". t4AxIG_content t4AxIG_content t4AxIG_content ."
+                         ". . . . .";
+    display: grid;
+
+    & .t4AxIG_spectrum-Card-avatar {
+      display: none;
+    }
+  }
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-image, .t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-illustration {
-  border-block-end-width: var(--spectrum-card-border-size, var(--spectrum-alias-border-size-thin));
-  border-block-end-style: solid;
-  border-start-start-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  border-start-end-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  place-self: center;
-  block-size: 100%;
-  inline-size: 100%;
-}
+  & .t4AxIG_spectrum-Card-image, & .t4AxIG_spectrum-Card-illustration {
+    border-block-end-width: var(--spectrum-card-border-size, var(--spectrum-alias-border-size-thin));
+    border-block-end-style: solid;
+    border-start-start-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+    border-start-end-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+    place-self: center;
+    block-size: 100%;
+    inline-size: 100%;
+  }
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-illustration {
-  place-items: center;
-  display: grid;
-}
+  & .t4AxIG_spectrum-Card-illustration {
+    place-items: center;
+    display: grid;
+  }
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-avatar {
-  grid-area: t4AxIG_preview;
-  position: absolute;
-  inset-block-end: -10px;
-  inset-inline-start: var(--spectrum-card-body-padding-left, var(--spectrum-global-dimension-size-300));
-}
+  & .t4AxIG_spectrum-Card-avatar {
+    grid-area: t4AxIG_preview;
+    position: absolute;
+    inset-block-end: -10px;
+    inset-inline-start: var(--spectrum-card-body-padding-left, var(--spectrum-global-dimension-size-300));
+  }
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-heading {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  align-self: baseline;
-  margin-inline-end: var(--spectrum-card-title-padding-right, var(--spectrum-global-dimension-size-100));
-  overflow: hidden;
-}
+  & .t4AxIG_spectrum-Card-heading {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    align-self: baseline;
+    margin-inline-end: var(--spectrum-card-title-padding-right, var(--spectrum-global-dimension-size-100));
+    overflow: hidden;
+  }
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-detail {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  align-self: baseline;
-  overflow: hidden;
-}
+  & .t4AxIG_spectrum-Card-detail {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    align-self: baseline;
+    overflow: hidden;
+  }
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-content {
-  margin-block-end: 5px;
+  & .t4AxIG_spectrum-Card-content {
+    margin-block-end: 5px;
+  }
 }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-checkboxWrapper {
-  z-index: 3;
-}
+.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--default {
+  & .t4AxIG_spectrum-Card-checkboxWrapper {
+    z-index: 3;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--default:after {
-  z-index: 2;
-  pointer-events: none;
-}
+  &:after {
+    z-index: 2;
+    pointer-events: none;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--default {
   border-width: var(--spectrum-card-border-size, var(--spectrum-alias-border-size-thin));
   border-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
   border-style: solid;
   position: relative;
-}
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--default:before, .t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--default:after {
-  content: " ";
-  border-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  block-size: 100%;
-  inline-size: 100%;
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-}
+  &:before, &:after {
+    content: " ";
+    border-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+    block-size: 100%;
+    inline-size: 100%;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--default:not(.t4AxIG_spectrum-Card--noPreview) .t4AxIG_spectrum-Card-grid {
-  grid-template-columns: var(--spectrum-card-body-padding-left, var(--spectrum-global-dimension-size-300)) minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500),
+  &:not(.t4AxIG_spectrum-Card--noPreview) .t4AxIG_spectrum-Card-grid {
+    grid-template-columns: var(--spectrum-card-body-padding-left, var(--spectrum-global-dimension-size-300)) minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500),
         1fr)
       minmax(0, auto) var(--spectrum-card-body-padding-right, var(--spectrum-global-dimension-size-300));
-  grid-template-rows: minmax(var(--spectrum-card-coverphoto-height, var(--spectrum-global-dimension-size-1700)), 1fr) var(--spectrum-global-dimension-size-200)
+    grid-template-rows: minmax(var(--spectrum-card-coverphoto-height, var(--spectrum-global-dimension-size-1700)), 1fr) var(--spectrum-global-dimension-size-200)
       minmax(var(--spectrum-actionbutton-height, var(--spectrum-alias-single-line-height)), auto) auto var(--spectrum-card-body-padding-bottom, var(--spectrum-global-dimension-size-250));
-  grid-template-areas: "t4AxIG_preview t4AxIG_preview t4AxIG_preview t4AxIG_preview t4AxIG_preview"
-                       ". . . . ."
-                       ". t4AxIG_title t4AxIG_detail . ."
-                       ". t4AxIG_content t4AxIG_content t4AxIG_content ."
-                       ". . . . .";
-  block-size: 100%;
-  display: grid;
-}
-
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--default:not(.t4AxIG_spectrum-Card--noPreview) .t4AxIG_spectrum-Card-grid:before {
-  content: " ";
-  border-start-start-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  border-start-end-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  grid-area: t4AxIG_preview;
-  block-size: 100%;
-  inline-size: 100%;
-}
+    grid-template-areas: "t4AxIG_preview t4AxIG_preview t4AxIG_preview t4AxIG_preview t4AxIG_preview"
+                         ". . . . ."
+                         ". t4AxIG_title t4AxIG_detail . ."
+                         ". t4AxIG_content t4AxIG_content t4AxIG_content ."
+                         ". . . . .";
+    block-size: 100%;
+    display: grid;
+
+    &:before {
+      content: " ";
+      border-start-start-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+      border-start-end-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+      grid-area: t4AxIG_preview;
+      block-size: 100%;
+      inline-size: 100%;
+    }
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--default.t4AxIG_spectrum-Card--noPreview .t4AxIG_spectrum-Card-grid {
-  grid-template-columns: var(--spectrum-card-body-padding-left, var(--spectrum-global-dimension-size-300)) minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500),
+  &.t4AxIG_spectrum-Card--noPreview .t4AxIG_spectrum-Card-grid {
+    grid-template-columns: var(--spectrum-card-body-padding-left, var(--spectrum-global-dimension-size-300)) minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500),
         1fr)
       minmax(0, auto) var(--spectrum-card-body-padding-right, var(--spectrum-global-dimension-size-300));
-  grid-template-rows: var(--spectrum-global-dimension-size-300) auto 1fr var(--spectrum-card-body-padding-bottom, var(--spectrum-global-dimension-size-250));
-  grid-template-areas: ". . . . ."
-                       ". t4AxIG_title t4AxIG_detail . ."
-                       ". t4AxIG_content t4AxIG_content t4AxIG_content ."
-                       ". . . . .";
-  block-size: 100%;
-  display: grid;
-}
-
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--default.t4AxIG_spectrum-Card--noPreview .t4AxIG_spectrum-Card-grid .t4AxIG_spectrum-Card-avatar {
-  display: none;
-}
+    grid-template-rows: var(--spectrum-global-dimension-size-300) auto 1fr var(--spectrum-card-body-padding-bottom, var(--spectrum-global-dimension-size-250));
+    grid-template-areas: ". . . . ."
+                         ". t4AxIG_title t4AxIG_detail . ."
+                         ". t4AxIG_content t4AxIG_content t4AxIG_content ."
+                         ". . . . .";
+    block-size: 100%;
+    display: grid;
+
+    & .t4AxIG_spectrum-Card-avatar {
+      display: none;
+    }
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-image, .t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-illustration {
-  border-block-end-width: var(--spectrum-card-border-size, var(--spectrum-alias-border-size-thin));
-  border-block-end-style: solid;
-  border-start-start-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  border-start-end-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  place-self: center;
-  block-size: 100%;
-  inline-size: 100%;
-}
+  & .t4AxIG_spectrum-Card-image, & .t4AxIG_spectrum-Card-illustration {
+    border-block-end-width: var(--spectrum-card-border-size, var(--spectrum-alias-border-size-thin));
+    border-block-end-style: solid;
+    border-start-start-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+    border-start-end-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+    place-self: center;
+    block-size: 100%;
+    inline-size: 100%;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-illustration {
-  place-items: center;
-  display: grid;
-}
+  & .t4AxIG_spectrum-Card-illustration {
+    place-items: center;
+    display: grid;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-avatar {
-  grid-area: t4AxIG_preview;
-  position: absolute;
-  inset-block-end: -10px;
-  inset-inline-start: var(--spectrum-card-body-padding-left, var(--spectrum-global-dimension-size-300));
-}
+  & .t4AxIG_spectrum-Card-avatar {
+    grid-area: t4AxIG_preview;
+    position: absolute;
+    inset-block-end: -10px;
+    inset-inline-start: var(--spectrum-card-body-padding-left, var(--spectrum-global-dimension-size-300));
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-heading {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  align-self: baseline;
-  margin-inline-end: var(--spectrum-card-title-padding-right, var(--spectrum-global-dimension-size-100));
-  overflow: hidden;
-}
+  & .t4AxIG_spectrum-Card-heading {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    align-self: baseline;
+    margin-inline-end: var(--spectrum-card-title-padding-right, var(--spectrum-global-dimension-size-100));
+    overflow: hidden;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-detail {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  align-self: baseline;
-  overflow: hidden;
-}
+  & .t4AxIG_spectrum-Card-detail {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    align-self: baseline;
+    overflow: hidden;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-content {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  margin-block-end: 5px;
+  & .t4AxIG_spectrum-Card-content {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin-block-end: 5px;
+  }
 }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-checkboxWrapper {
-  z-index: 3;
-}
+.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--default {
+  & .t4AxIG_spectrum-Card-checkboxWrapper {
+    z-index: 3;
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--default:after {
-  z-index: 2;
-  pointer-events: none;
-}
+  &:after {
+    z-index: 2;
+    pointer-events: none;
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--default {
   border-width: var(--spectrum-card-border-size, var(--spectrum-alias-border-size-thin));
   border-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
   border-style: solid;
   position: relative;
-}
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--default:before, .t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--default:after {
-  content: " ";
-  border-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  block-size: 100%;
-  inline-size: 100%;
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-}
+  &:before, &:after {
+    content: " ";
+    border-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+    block-size: 100%;
+    inline-size: 100%;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--default:not(.t4AxIG_spectrum-Card--noPreview) .t4AxIG_spectrum-Card-grid {
-  grid-template-columns: var(--spectrum-card-body-padding-left, var(--spectrum-global-dimension-size-300)) minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500),
+  &:not(.t4AxIG_spectrum-Card--noPreview) .t4AxIG_spectrum-Card-grid {
+    grid-template-columns: var(--spectrum-card-body-padding-left, var(--spectrum-global-dimension-size-300)) minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500),
         1fr)
       minmax(0, auto) var(--spectrum-card-body-padding-right, var(--spectrum-global-dimension-size-300));
-  grid-template-rows: minmax(var(--spectrum-card-coverphoto-height, var(--spectrum-global-dimension-size-1700)), auto) var(--spectrum-global-dimension-size-300)
+    grid-template-rows: minmax(var(--spectrum-card-coverphoto-height, var(--spectrum-global-dimension-size-1700)), auto) var(--spectrum-global-dimension-size-300)
       minmax(var(--spectrum-actionbutton-height, var(--spectrum-alias-single-line-height)), auto)
       1fr var(--spectrum-card-body-padding-bottom, var(--spectrum-global-dimension-size-250));
-  grid-template-areas: "t4AxIG_preview t4AxIG_preview t4AxIG_preview t4AxIG_preview t4AxIG_preview"
-                       ". . . . ."
-                       ". t4AxIG_title t4AxIG_detail . ."
-                       ". t4AxIG_content t4AxIG_content t4AxIG_content ."
-                       ". . . . .";
-  display: grid;
-}
-
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--default:not(.t4AxIG_spectrum-Card--noPreview) .t4AxIG_spectrum-Card-grid:before {
-  content: " ";
-  border-start-start-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  border-start-end-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  grid-area: t4AxIG_preview;
-  block-size: 100%;
-  inline-size: 100%;
-}
+    grid-template-areas: "t4AxIG_preview t4AxIG_preview t4AxIG_preview t4AxIG_preview t4AxIG_preview"
+                         ". . . . ."
+                         ". t4AxIG_title t4AxIG_detail . ."
+                         ". t4AxIG_content t4AxIG_content t4AxIG_content ."
+                         ". . . . .";
+    display: grid;
+
+    &:before {
+      content: " ";
+      border-start-start-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+      border-start-end-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+      grid-area: t4AxIG_preview;
+      block-size: 100%;
+      inline-size: 100%;
+    }
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--default.t4AxIG_spectrum-Card--noPreview .t4AxIG_spectrum-Card-grid {
-  grid-template-columns: var(--spectrum-card-body-padding-left, var(--spectrum-global-dimension-size-300)) minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500),
+  &.t4AxIG_spectrum-Card--noPreview .t4AxIG_spectrum-Card-grid {
+    grid-template-columns: var(--spectrum-card-body-padding-left, var(--spectrum-global-dimension-size-300)) minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500),
         1fr)
       minmax(0, auto) var(--spectrum-card-body-padding-right, var(--spectrum-global-dimension-size-300));
-  grid-template-rows: var(--spectrum-global-dimension-size-300) auto 1fr var(--spectrum-card-body-padding-bottom, var(--spectrum-global-dimension-size-250));
-  grid-template-areas: ". . . . ."
-                       ". t4AxIG_title t4AxIG_detail . ."
-                       ". t4AxIG_content t4AxIG_content t4AxIG_content ."
-                       ". . . . .";
-  display: grid;
-}
-
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--default.t4AxIG_spectrum-Card--noPreview .t4AxIG_spectrum-Card-grid .t4AxIG_spectrum-Card-avatar {
-  display: none;
-}
+    grid-template-rows: var(--spectrum-global-dimension-size-300) auto 1fr var(--spectrum-card-body-padding-bottom, var(--spectrum-global-dimension-size-250));
+    grid-template-areas: ". . . . ."
+                         ". t4AxIG_title t4AxIG_detail . ."
+                         ". t4AxIG_content t4AxIG_content t4AxIG_content ."
+                         ". . . . .";
+    display: grid;
+
+    & .t4AxIG_spectrum-Card-avatar {
+      display: none;
+    }
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-image, .t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-illustration {
-  border-block-end-width: var(--spectrum-card-border-size, var(--spectrum-alias-border-size-thin));
-  border-block-end-style: solid;
-  border-start-start-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  border-start-end-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  place-self: center;
-  block-size: 100%;
-  inline-size: 100%;
-}
+  & .t4AxIG_spectrum-Card-image, & .t4AxIG_spectrum-Card-illustration {
+    border-block-end-width: var(--spectrum-card-border-size, var(--spectrum-alias-border-size-thin));
+    border-block-end-style: solid;
+    border-start-start-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+    border-start-end-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+    place-self: center;
+    block-size: 100%;
+    inline-size: 100%;
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-illustration {
-  inline-size: 100%;
-  block-size: var(--spectrum-card-coverphoto-height, var(--spectrum-global-dimension-size-1700));
-  place-items: center;
-  display: grid;
-}
+  & .t4AxIG_spectrum-Card-illustration {
+    inline-size: 100%;
+    block-size: var(--spectrum-card-coverphoto-height, var(--spectrum-global-dimension-size-1700));
+    place-items: center;
+    display: grid;
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-avatar {
-  grid-area: t4AxIG_preview;
-  position: absolute;
-  inset-block-end: -10px;
-  inset-inline-start: var(--spectrum-card-body-padding-left, var(--spectrum-global-dimension-size-300));
-}
+  & .t4AxIG_spectrum-Card-avatar {
+    grid-area: t4AxIG_preview;
+    position: absolute;
+    inset-block-end: -10px;
+    inset-inline-start: var(--spectrum-card-body-padding-left, var(--spectrum-global-dimension-size-300));
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-heading {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  align-self: baseline;
-  margin-inline-end: var(--spectrum-card-title-padding-right, var(--spectrum-global-dimension-size-100));
-  overflow: hidden;
-}
+  & .t4AxIG_spectrum-Card-heading {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    align-self: baseline;
+    margin-inline-end: var(--spectrum-card-title-padding-right, var(--spectrum-global-dimension-size-100));
+    overflow: hidden;
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-detail {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  align-self: baseline;
-  overflow: hidden;
-}
+  & .t4AxIG_spectrum-Card-detail {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    align-self: baseline;
+    overflow: hidden;
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-content {
-  margin-block-end: 5px;
+  & .t4AxIG_spectrum-Card-content {
+    margin-block-end: 5px;
+  }
 }
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-checkboxWrapper {
-  z-index: 3;
-}
+.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--isQuiet {
+  & .t4AxIG_spectrum-Card-checkboxWrapper {
+    z-index: 3;
+  }
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid:before {
-  z-index: -1;
-}
+  & .t4AxIG_spectrum-Card-grid:before {
+    z-index: -1;
+  }
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid:after {
-  z-index: 2;
-}
+  & .t4AxIG_spectrum-Card-grid:after {
+    z-index: 2;
+  }
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--isQuiet {
   min-inline-size: var(--spectrum-card-quiet-min-size, var(--spectrum-global-dimension-size-1700));
-}
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid {
-  grid-template-columns: minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500), 1fr)
+  & .t4AxIG_spectrum-Card-grid {
+    grid-template-columns: minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500), 1fr)
       minmax(0, auto);
-  grid-template-rows: minmax(var(--spectrum-card-coverphoto-height, var(--spectrum-global-dimension-size-1700)), 1fr) var(--spectrum-card-quiet-body-header-margin-top, var(--spectrum-global-dimension-size-175))
+    grid-template-rows: minmax(var(--spectrum-card-coverphoto-height, var(--spectrum-global-dimension-size-1700)), 1fr) var(--spectrum-card-quiet-body-header-margin-top, var(--spectrum-global-dimension-size-175))
       minmax(var(--spectrum-actionbutton-height, var(--spectrum-alias-single-line-height)), auto) auto;
-  grid-template-areas: "t4AxIG_preview t4AxIG_preview t4AxIG_preview"
-                       ". . ."
-                       "t4AxIG_title t4AxIG_detail ."
-                       "t4AxIG_content t4AxIG_content t4AxIG_content";
-  block-size: 100%;
-  display: grid;
-}
-
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid:before {
-  content: " ";
-  border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
-  grid-area: t4AxIG_preview;
-}
-
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid:after {
-  content: " ";
-  margin: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * -2);
-  border-radius: calc(var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular)) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)));
-  grid-area: t4AxIG_preview;
-  position: absolute;
-  inset-block: 0;
-  inset-inline: 0;
-}
-
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid .t4AxIG_spectrum-Card-decoration {
-  border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
-  grid-area: t4AxIG_preview;
-  block-size: 100%;
-  inline-size: 100%;
-  display: block;
-}
+    grid-template-areas: "t4AxIG_preview t4AxIG_preview t4AxIG_preview"
+                         ". . ."
+                         "t4AxIG_title t4AxIG_detail ."
+                         "t4AxIG_content t4AxIG_content t4AxIG_content";
+    block-size: 100%;
+    display: grid;
+
+    &:before {
+      content: " ";
+      border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
+      grid-area: t4AxIG_preview;
+    }
+
+    &:after {
+      content: " ";
+      margin: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * -2);
+      border-radius: calc(var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular)) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)));
+      grid-area: t4AxIG_preview;
+      position: absolute;
+      inset-block: 0;
+      inset-inline: 0;
+    }
+
+    & .t4AxIG_spectrum-Card-decoration {
+      border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
+      grid-area: t4AxIG_preview;
+      block-size: 100%;
+      inline-size: 100%;
+      display: block;
+    }
+  }
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-image, .t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-illustration {
-  border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
-  place-self: center;
-  block-size: 100%;
-  inline-size: 100%;
-  min-inline-size: 100%;
-}
+  & .t4AxIG_spectrum-Card-image, & .t4AxIG_spectrum-Card-illustration {
+    border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
+    place-self: center;
+    block-size: 100%;
+    inline-size: 100%;
+    min-inline-size: 100%;
+  }
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-illustration {
-  place-items: center;
-  display: grid;
-}
+  & .t4AxIG_spectrum-Card-illustration {
+    place-items: center;
+    display: grid;
+  }
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-avatar {
-  display: none;
-}
+  & .t4AxIG_spectrum-Card-avatar {
+    display: none;
+  }
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-heading, .t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-detail {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  align-self: baseline;
-  margin-inline-end: var(--spectrum-card-title-padding-right, var(--spectrum-global-dimension-size-100));
-  overflow: hidden;
-}
+  & .t4AxIG_spectrum-Card-heading, & .t4AxIG_spectrum-Card-detail {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    align-self: baseline;
+    margin-inline-end: var(--spectrum-card-title-padding-right, var(--spectrum-global-dimension-size-100));
+    overflow: hidden;
+  }
 
-.t4AxIG_spectrum-Card--waterfall.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-content {
-  margin-block-end: 5px;
+  & .t4AxIG_spectrum-Card-content {
+    margin-block-end: 5px;
+  }
 }
 
-.t4AxIG_spectrum-Card--gallery.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-checkboxWrapper {
-  z-index: 3;
-}
+.t4AxIG_spectrum-Card--gallery.t4AxIG_spectrum-Card--isQuiet {
+  & .t4AxIG_spectrum-Card-checkboxWrapper {
+    z-index: 3;
+  }
 
-.t4AxIG_spectrum-Card--gallery.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid:before {
-  z-index: -1;
-}
+  & .t4AxIG_spectrum-Card-grid:before {
+    z-index: -1;
+  }
 
-.t4AxIG_spectrum-Card--gallery.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid:after {
-  z-index: 2;
-}
+  & .t4AxIG_spectrum-Card-grid:after {
+    z-index: 2;
+  }
 
-.t4AxIG_spectrum-Card--gallery.t4AxIG_spectrum-Card--isQuiet {
   min-inline-size: 0;
-}
 
-.t4AxIG_spectrum-Card--gallery.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid {
-  grid-template-columns: minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500), 1fr)
+  & .t4AxIG_spectrum-Card-grid {
+    grid-template-columns: minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500), 1fr)
       minmax(0, auto);
-  grid-template-rows: 1fr var(--spectrum-card-quiet-body-header-margin-top, var(--spectrum-global-dimension-size-175)) var(--spectrum-actionbutton-height, var(--spectrum-alias-single-line-height))
+    grid-template-rows: 1fr var(--spectrum-card-quiet-body-header-margin-top, var(--spectrum-global-dimension-size-175)) var(--spectrum-actionbutton-height, var(--spectrum-alias-single-line-height))
       var(--spectrum-alias-single-line-height, var(--spectrum-global-dimension-size-400));
-  grid-template-areas: "t4AxIG_preview t4AxIG_preview t4AxIG_preview"
-                       ". . ."
-                       "t4AxIG_title t4AxIG_detail ."
-                       "t4AxIG_content t4AxIG_content t4AxIG_content";
-  block-size: 100%;
-  display: grid;
-}
-
-.t4AxIG_spectrum-Card--gallery.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid:before {
-  content: " ";
-  border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
-  grid-area: t4AxIG_preview;
-}
-
-.t4AxIG_spectrum-Card--gallery.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid:after {
-  content: " ";
-  margin: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * -2);
-  border-radius: calc(var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular)) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)));
-  grid-area: t4AxIG_preview;
-  position: absolute;
-  inset-block: 0;
-  inset-inline: 0;
-}
-
-.t4AxIG_spectrum-Card--gallery.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid .t4AxIG_spectrum-Card-decoration {
-  border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
-  grid-area: t4AxIG_preview;
-  block-size: 100%;
-  inline-size: 100%;
-  display: block;
-}
-
-.t4AxIG_spectrum-Card--gallery.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-image, .t4AxIG_spectrum-Card--gallery.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-illustration {
-  border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
-  place-self: center;
-  block-size: 100%;
-  inline-size: 100%;
-  min-inline-size: 100%;
-}
+    grid-template-areas: "t4AxIG_preview t4AxIG_preview t4AxIG_preview"
+                         ". . ."
+                         "t4AxIG_title t4AxIG_detail ."
+                         "t4AxIG_content t4AxIG_content t4AxIG_content";
+    block-size: 100%;
+    display: grid;
+
+    &:before {
+      content: " ";
+      border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
+      grid-area: t4AxIG_preview;
+    }
+
+    &:after {
+      content: " ";
+      margin: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * -2);
+      border-radius: calc(var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular)) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)));
+      grid-area: t4AxIG_preview;
+      position: absolute;
+      inset-block: 0;
+      inset-inline: 0;
+    }
+
+    & .t4AxIG_spectrum-Card-decoration {
+      border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
+      grid-area: t4AxIG_preview;
+      block-size: 100%;
+      inline-size: 100%;
+      display: block;
+    }
+  }
 
-:is(.t4AxIG_spectrum-Card--gallery.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-image, .t4AxIG_spectrum-Card--gallery.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-illustration) > img {
-  width: unset;
-  margin: auto;
-}
+  & .t4AxIG_spectrum-Card-image, & .t4AxIG_spectrum-Card-illustration {
+    border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
+    place-self: center;
+    block-size: 100%;
+    inline-size: 100%;
+    min-inline-size: 100%;
+
+    & > img {
+      width: unset;
+      margin: auto;
+    }
+  }
 
-.t4AxIG_spectrum-Card--gallery.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-illustration {
-  place-items: center;
-  display: grid;
-}
+  & .t4AxIG_spectrum-Card-illustration {
+    place-items: center;
+    display: grid;
+  }
 
-.t4AxIG_spectrum-Card--gallery.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-avatar {
-  display: none;
-}
+  & .t4AxIG_spectrum-Card-avatar {
+    display: none;
+  }
 
-.t4AxIG_spectrum-Card--gallery.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-heading, .t4AxIG_spectrum-Card--gallery.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-detail {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  align-self: baseline;
-  margin-inline-end: var(--spectrum-card-title-padding-right, var(--spectrum-global-dimension-size-100));
-  overflow: hidden;
-}
+  & .t4AxIG_spectrum-Card-heading, & .t4AxIG_spectrum-Card-detail {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    align-self: baseline;
+    margin-inline-end: var(--spectrum-card-title-padding-right, var(--spectrum-global-dimension-size-100));
+    overflow: hidden;
+  }
 
-.t4AxIG_spectrum-Card--gallery.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-content {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  margin-block-end: 5px;
+  & .t4AxIG_spectrum-Card-content {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin-block-end: 5px;
+  }
 }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-checkboxWrapper {
-  z-index: 3;
-}
+.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--isQuiet {
+  & .t4AxIG_spectrum-Card-checkboxWrapper {
+    z-index: 3;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid:before {
-  z-index: -1;
-}
+  & .t4AxIG_spectrum-Card-grid:before {
+    z-index: -1;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid:after {
-  z-index: 2;
-}
+  & .t4AxIG_spectrum-Card-grid:after {
+    z-index: 2;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--isQuiet {
   min-inline-size: var(--spectrum-card-quiet-min-size, var(--spectrum-global-dimension-size-1700));
-}
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid {
-  grid-template-columns: minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500), 1fr)
+  & .t4AxIG_spectrum-Card-grid {
+    grid-template-columns: minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500), 1fr)
       minmax(0, auto);
-  grid-template-rows: auto var(--spectrum-card-quiet-body-header-margin-top, var(--spectrum-global-dimension-size-175)) minmax(var(--spectrum-actionbutton-height, var(--spectrum-alias-single-line-height)),
+    grid-template-rows: auto var(--spectrum-card-quiet-body-header-margin-top, var(--spectrum-global-dimension-size-175)) minmax(var(--spectrum-actionbutton-height, var(--spectrum-alias-single-line-height)),
         auto)
       var(--spectrum-alias-single-line-height, var(--spectrum-global-dimension-size-400)) 1fr;
-  grid-template-areas: "t4AxIG_preview t4AxIG_preview t4AxIG_preview"
-                       ". . ."
-                       "t4AxIG_title t4AxIG_detail ."
-                       "t4AxIG_content t4AxIG_content t4AxIG_content"
-                       ". . .";
-  block-size: 100%;
-  display: grid;
-}
-
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid:before {
-  content: " ";
-  border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
-  grid-area: t4AxIG_preview;
-  block-size: 0;
-  inline-size: 0;
-  padding-top: 100%;
-  padding-left: 100%;
-}
-
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid:after {
-  content: " ";
-  margin: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * -2);
-  border-radius: calc(var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular)) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)));
-  grid-area: t4AxIG_preview;
-  position: absolute;
-  inset-block: 0;
-  inset-inline: 0;
-}
-
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid .t4AxIG_spectrum-Card-decoration {
-  border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
-  grid-area: t4AxIG_preview;
-  block-size: 100%;
-  inline-size: 100%;
-  display: block;
-}
+    grid-template-areas: "t4AxIG_preview t4AxIG_preview t4AxIG_preview"
+                         ". . ."
+                         "t4AxIG_title t4AxIG_detail ."
+                         "t4AxIG_content t4AxIG_content t4AxIG_content"
+                         ". . .";
+    block-size: 100%;
+    display: grid;
+
+    &:before {
+      content: " ";
+      border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
+      grid-area: t4AxIG_preview;
+      block-size: 0;
+      inline-size: 0;
+      padding-top: 100%;
+      padding-left: 100%;
+    }
+
+    &:after {
+      content: " ";
+      margin: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * -2);
+      border-radius: calc(var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular)) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)));
+      grid-area: t4AxIG_preview;
+      position: absolute;
+      inset-block: 0;
+      inset-inline: 0;
+    }
+
+    & .t4AxIG_spectrum-Card-decoration {
+      border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
+      grid-area: t4AxIG_preview;
+      block-size: 100%;
+      inline-size: 100%;
+      display: block;
+    }
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-image, .t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-illustration {
-  box-sizing: border-box;
-  place-self: center;
-  block-size: 100%;
-  inline-size: 100%;
-  min-inline-size: 100%;
-}
+  & .t4AxIG_spectrum-Card-image, & .t4AxIG_spectrum-Card-illustration {
+    box-sizing: border-box;
+    place-self: center;
+    block-size: 100%;
+    inline-size: 100%;
+    min-inline-size: 100%;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-image {
-  clip-path: inset(0% 0% 0% 0% round var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular)));
-  position: absolute;
-}
+  & .t4AxIG_spectrum-Card-image {
+    clip-path: inset(0% 0% 0% 0% round var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular)));
+    position: absolute;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-illustration {
-  place-items: center;
-  display: grid;
-}
+  & .t4AxIG_spectrum-Card-illustration {
+    place-items: center;
+    display: grid;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-avatar {
-  display: none;
-}
+  & .t4AxIG_spectrum-Card-avatar {
+    display: none;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-heading, .t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-detail {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  align-self: baseline;
-  margin-inline-end: var(--spectrum-card-title-padding-right, var(--spectrum-global-dimension-size-100));
-  overflow: hidden;
-}
+  & .t4AxIG_spectrum-Card-heading, & .t4AxIG_spectrum-Card-detail {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    align-self: baseline;
+    margin-inline-end: var(--spectrum-card-title-padding-right, var(--spectrum-global-dimension-size-100));
+    overflow: hidden;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-content {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  margin-block-end: 5px;
+  & .t4AxIG_spectrum-Card-content {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin-block-end: 5px;
+  }
 }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-checkboxWrapper {
-  z-index: 3;
-}
+.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--isQuiet {
+  & .t4AxIG_spectrum-Card-checkboxWrapper {
+    z-index: 3;
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid:before {
-  z-index: -1;
-}
+  & .t4AxIG_spectrum-Card-grid:before {
+    z-index: -1;
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid:after {
-  z-index: 2;
-}
+  & .t4AxIG_spectrum-Card-grid:after {
+    z-index: 2;
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--isQuiet {
   min-inline-size: var(--spectrum-card-quiet-min-size, var(--spectrum-global-dimension-size-1700));
-}
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid {
-  grid-template-columns: minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500), 1fr)
+  & .t4AxIG_spectrum-Card-grid {
+    grid-template-columns: minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500), 1fr)
       minmax(0, auto);
-  grid-template-rows: auto var(--spectrum-card-quiet-body-header-margin-top, var(--spectrum-global-dimension-size-175)) minmax(var(--spectrum-actionbutton-height, var(--spectrum-alias-single-line-height)),
+    grid-template-rows: auto var(--spectrum-card-quiet-body-header-margin-top, var(--spectrum-global-dimension-size-175)) minmax(var(--spectrum-actionbutton-height, var(--spectrum-alias-single-line-height)),
         auto)
       auto var(--spectrum-card-body-padding-bottom, var(--spectrum-global-dimension-size-250));
-  grid-template-areas: "t4AxIG_preview t4AxIG_preview t4AxIG_preview"
-                       ". . ."
-                       "t4AxIG_title t4AxIG_detail ."
-                       "t4AxIG_content t4AxIG_content t4AxIG_content"
-                       ". . .";
-  block-size: 100%;
-  display: grid;
-}
-
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid:before {
-  content: " ";
-  border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
-  grid-area: t4AxIG_preview;
-}
-
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid:after {
-  content: " ";
-  margin: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * -2);
-  padding: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * 2);
-  border-radius: calc(var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular)) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)));
-  background-clip: content-box;
-  grid-area: t4AxIG_preview;
-  position: absolute;
-  inset-block: 0;
-  inset-inline: 0;
-}
-
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid .t4AxIG_spectrum-Card-decoration {
-  border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
-  grid-area: t4AxIG_preview;
-  block-size: 100%;
-  inline-size: 100%;
-  display: block;
-}
-
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-image, .t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-illustration {
-  border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
-  place-self: center;
-  display: flex;
-}
+    grid-template-areas: "t4AxIG_preview t4AxIG_preview t4AxIG_preview"
+                         ". . ."
+                         "t4AxIG_title t4AxIG_detail ."
+                         "t4AxIG_content t4AxIG_content t4AxIG_content"
+                         ". . .";
+    block-size: 100%;
+    display: grid;
+
+    &:before {
+      content: " ";
+      border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
+      grid-area: t4AxIG_preview;
+    }
+
+    &:after {
+      content: " ";
+      margin: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * -2);
+      padding: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * 2);
+      border-radius: calc(var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular)) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)));
+      background-clip: content-box;
+      grid-area: t4AxIG_preview;
+      position: absolute;
+      inset-block: 0;
+      inset-inline: 0;
+    }
+
+    & .t4AxIG_spectrum-Card-decoration {
+      border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
+      grid-area: t4AxIG_preview;
+      block-size: 100%;
+      inline-size: 100%;
+      display: block;
+    }
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-illustration {
-  inline-size: 100%;
-  block-size: var(--spectrum-card-coverphoto-height, var(--spectrum-global-dimension-size-1700));
-  place-items: center;
-  display: grid;
-}
+  & .t4AxIG_spectrum-Card-image, & .t4AxIG_spectrum-Card-illustration {
+    border-radius: var(--spectrum-card-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
+    place-self: center;
+    display: flex;
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-avatar {
-  display: none;
-}
+  & .t4AxIG_spectrum-Card-illustration {
+    inline-size: 100%;
+    block-size: var(--spectrum-card-coverphoto-height, var(--spectrum-global-dimension-size-1700));
+    place-items: center;
+    display: grid;
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-heading {
-  align-self: baseline;
-  margin-inline-end: var(--spectrum-card-title-padding-right, var(--spectrum-global-dimension-size-100));
-}
+  & .t4AxIG_spectrum-Card-avatar {
+    display: none;
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-detail {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  align-self: baseline;
-  margin-inline-end: var(--spectrum-card-title-padding-right, var(--spectrum-global-dimension-size-100));
-  overflow: hidden;
-}
+  & .t4AxIG_spectrum-Card-heading {
+    align-self: baseline;
+    margin-inline-end: var(--spectrum-card-title-padding-right, var(--spectrum-global-dimension-size-100));
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-content {
-  margin-block-end: 5px;
-}
+  & .t4AxIG_spectrum-Card-detail {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    align-self: baseline;
+    margin-inline-end: var(--spectrum-card-title-padding-right, var(--spectrum-global-dimension-size-100));
+    overflow: hidden;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-grid:after {
-  z-index: 2;
+  & .t4AxIG_spectrum-Card-content {
+    margin-block-end: 5px;
+  }
 }
 
 .t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--horizontal {
+  & .t4AxIG_spectrum-Card-grid:after {
+    z-index: 2;
+  }
+
   border-width: var(--spectrum-card-border-size, var(--spectrum-alias-border-size-thin));
   border-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
   border-style: solid;
-}
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-checkboxWrapper, :is(.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--horizontal.t4AxIG_is-focused, .t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--horizontal.t4AxIG_is-selected, .t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--horizontal.t4AxIG_is-hovered) .t4AxIG_spectrum-Card-checkboxWrapper {
-  display: none;
-}
-
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-grid {
-  grid-template-columns: auto var(--spectrum-global-dimension-size-200) 1fr auto var(--spectrum-global-dimension-size-200);
-  grid-template-rows: var(--spectrum-global-dimension-size-400) 1fr var(--spectrum-global-dimension-size-200);
-  grid-template-areas: "t4AxIG_preview . t4AxIG_title . ."
-                       "t4AxIG_preview . t4AxIG_content t4AxIG_content ."
-                       "t4AxIG_preview . . . .";
-  block-size: 100%;
-  display: grid;
-}
+  & .t4AxIG_spectrum-Card-checkboxWrapper {
+    display: none;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-grid:before {
-  content: " ";
-  border-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  block-size: 100%;
-  inline-size: 100%;
-  position: absolute;
-}
+  &.t4AxIG_is-focused, &.t4AxIG_is-selected, &.t4AxIG_is-hovered {
+    & .t4AxIG_spectrum-Card-checkboxWrapper {
+      display: none;
+    }
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-image, .t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-illustration {
-  border-inline-end-width: var(--spectrum-card-border-size, var(--spectrum-alias-border-size-thin));
-  border-inline-end-style: solid;
-  border-start-start-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  border-end-start-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  grid-area: t4AxIG_preview;
-  place-self: center;
-  block-size: 100%;
-}
+  & .t4AxIG_spectrum-Card-grid {
+    grid-template-columns: auto var(--spectrum-global-dimension-size-200) 1fr auto var(--spectrum-global-dimension-size-200);
+    grid-template-rows: var(--spectrum-global-dimension-size-400) 1fr var(--spectrum-global-dimension-size-200);
+    grid-template-areas: "t4AxIG_preview . t4AxIG_title . ."
+                         "t4AxIG_preview . t4AxIG_content t4AxIG_content ."
+                         "t4AxIG_preview . . . .";
+    block-size: 100%;
+    display: grid;
+
+    &:before {
+      content: " ";
+      border-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+      block-size: 100%;
+      inline-size: 100%;
+      position: absolute;
+    }
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-illustration {
-  place-items: center;
-  display: grid;
-}
+  & .t4AxIG_spectrum-Card-image, & .t4AxIG_spectrum-Card-illustration {
+    border-inline-end-width: var(--spectrum-card-border-size, var(--spectrum-alias-border-size-thin));
+    border-inline-end-style: solid;
+    border-start-start-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+    border-end-start-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+    grid-area: t4AxIG_preview;
+    place-self: center;
+    block-size: 100%;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-avatar {
-  display: none;
-}
+  & .t4AxIG_spectrum-Card-illustration {
+    place-items: center;
+    display: grid;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-heading {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  align-self: center;
-  margin-inline-end: var(--spectrum-card-title-padding-right, var(--spectrum-global-dimension-size-100));
-  overflow: hidden;
-}
+  & .t4AxIG_spectrum-Card-avatar {
+    display: none;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-detail {
-  display: none;
-}
+  & .t4AxIG_spectrum-Card-heading {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    align-self: center;
+    margin-inline-end: var(--spectrum-card-title-padding-right, var(--spectrum-global-dimension-size-100));
+    overflow: hidden;
+  }
 
-.t4AxIG_spectrum-Card--grid.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-content {
-  -webkit-line-clamp: 2;
-  visibility: visible;
-  -webkit-box-orient: vertical;
-  width: 100%;
-  display: -webkit-box;
-  overflow: hidden;
-}
+  & .t4AxIG_spectrum-Card-detail {
+    display: none;
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-grid:after {
-  z-index: 2;
+  & .t4AxIG_spectrum-Card-content {
+    -webkit-line-clamp: 2;
+    visibility: visible;
+    -webkit-box-orient: vertical;
+    width: 100%;
+    display: -webkit-box;
+    overflow: hidden;
+  }
 }
 
 .t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--horizontal {
+  & .t4AxIG_spectrum-Card-grid:after {
+    z-index: 2;
+  }
+
   border-width: var(--spectrum-card-border-size, var(--spectrum-alias-border-size-thin));
   border-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
   border-style: solid;
-}
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-checkboxWrapper, :is(.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--horizontal.t4AxIG_is-focused, .t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--horizontal.t4AxIG_is-selected, .t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--horizontal.t4AxIG_is-hovered) .t4AxIG_spectrum-Card-checkboxWrapper {
-  display: none;
-}
+  & .t4AxIG_spectrum-Card-checkboxWrapper {
+    display: none;
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-grid {
-  grid-template-columns: auto var(--spectrum-global-dimension-size-200) 1fr auto var(--spectrum-global-dimension-size-200);
-  grid-template-rows: var(--spectrum-global-dimension-size-400) 1fr var(--spectrum-global-dimension-size-200);
-  grid-template-areas: "t4AxIG_preview . t4AxIG_title . ."
-                       "t4AxIG_preview . t4AxIG_content t4AxIG_content ."
-                       "t4AxIG_preview . . . .";
-  block-size: 100%;
-  max-block-size: 100%;
-  display: grid;
-  position: relative;
-}
+  &.t4AxIG_is-focused, &.t4AxIG_is-selected, &.t4AxIG_is-hovered {
+    & .t4AxIG_spectrum-Card-checkboxWrapper {
+      display: none;
+    }
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-grid:before, .t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-grid:after {
-  content: " ";
-  border-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  block-size: 100%;
-  inline-size: 100%;
-  position: absolute;
-}
+  & .t4AxIG_spectrum-Card-grid {
+    grid-template-columns: auto var(--spectrum-global-dimension-size-200) 1fr auto var(--spectrum-global-dimension-size-200);
+    grid-template-rows: var(--spectrum-global-dimension-size-400) 1fr var(--spectrum-global-dimension-size-200);
+    grid-template-areas: "t4AxIG_preview . t4AxIG_title . ."
+                         "t4AxIG_preview . t4AxIG_content t4AxIG_content ."
+                         "t4AxIG_preview . . . .";
+    block-size: 100%;
+    max-block-size: 100%;
+    display: grid;
+    position: relative;
+
+    &:before, &:after {
+      content: " ";
+      border-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+      block-size: 100%;
+      inline-size: 100%;
+      position: absolute;
+    }
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-image, .t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-illustration {
-  border-inline-end-width: var(--spectrum-card-border-size, var(--spectrum-alias-border-size-thin));
-  border-inline-end-style: solid;
-  border-start-start-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  border-end-start-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
-  grid-area: t4AxIG_preview;
-  place-self: center;
-  block-size: 100%;
-}
+  & .t4AxIG_spectrum-Card-image, & .t4AxIG_spectrum-Card-illustration {
+    border-inline-end-width: var(--spectrum-card-border-size, var(--spectrum-alias-border-size-thin));
+    border-inline-end-style: solid;
+    border-start-start-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+    border-end-start-radius: var(--spectrum-card-border-radius, var(--spectrum-alias-border-radius-regular));
+    grid-area: t4AxIG_preview;
+    place-self: center;
+    block-size: 100%;
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-illustration {
-  place-items: center;
-  display: grid;
-}
+  & .t4AxIG_spectrum-Card-illustration {
+    place-items: center;
+    display: grid;
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-avatar {
-  display: none;
-}
+  & .t4AxIG_spectrum-Card-avatar {
+    display: none;
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-heading {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  align-self: center;
-  margin-inline-end: var(--spectrum-card-title-padding-right, var(--spectrum-global-dimension-size-100));
-  overflow: hidden;
-}
+  & .t4AxIG_spectrum-Card-heading {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    align-self: center;
+    margin-inline-end: var(--spectrum-card-title-padding-right, var(--spectrum-global-dimension-size-100));
+    overflow: hidden;
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-detail {
-  display: none;
-}
+  & .t4AxIG_spectrum-Card-detail {
+    display: none;
+  }
 
-.t4AxIG_spectrum-Card--noLayout.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-content {
-  -webkit-line-clamp: 2;
-  visibility: visible;
-  -webkit-box-orient: vertical;
-  width: 100%;
-  display: -webkit-box;
-  overflow: hidden;
+  & .t4AxIG_spectrum-Card-content {
+    -webkit-line-clamp: 2;
+    visibility: visible;
+    -webkit-box-orient: vertical;
+    width: 100%;
+    display: -webkit-box;
+    overflow: hidden;
+  }
 }
 
 .t4AxIG_spectrum-CardView {
   outline: none;
-}
 
-.t4AxIG_spectrum-CardView .t4AxIG_spectrum-CardView-centeredWrapper {
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
+  & .t4AxIG_spectrum-CardView-centeredWrapper {
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    display: flex;
+  }
 
-.t4AxIG_spectrum-CardView .t4AxIG_spectrum-CardView-row {
-  outline: none;
-  height: 100%;
+  & .t4AxIG_spectrum-CardView-row {
+    outline: none;
+    height: 100%;
+  }
 }
 
-.t4AxIG_spectrum-Card.t4AxIG_is-drop-target {
-  border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-  box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-  background-color: var(--spectrum-alias-highlight-selected);
-}
+.t4AxIG_spectrum-Card {
+  &.t4AxIG_is-drop-target {
+    border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+    box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+    background-color: var(--spectrum-alias-highlight-selected);
+  }
 
-.t4AxIG_spectrum-Card .t4AxIG_spectrum-Card-checkboxWrapper {
-  background-color: var(--spectrum-quickactions-background-color, var(--spectrum-alias-background-color-quickactions));
-}
+  & .t4AxIG_spectrum-Card-checkboxWrapper {
+    background-color: var(--spectrum-quickactions-background-color, var(--spectrum-alias-background-color-quickactions));
+  }
 
-.t4AxIG_spectrum-Card .t4AxIG_spectrum-Card-detail {
-  color: var(--spectrum-card-description-text-color, var(--spectrum-global-color-gray-700));
+  & .t4AxIG_spectrum-Card-detail {
+    color: var(--spectrum-card-description-text-color, var(--spectrum-global-color-gray-700));
+  }
 }
 
 .t4AxIG_spectrum-Card-heading {
@@ -1041,189 +1065,253 @@
 .t4AxIG_spectrum-Card--default {
   border-color: var(--spectrum-card-border-color, var(--spectrum-global-color-gray-200));
   background-color: var(--spectrum-card-background-color, var(--spectrum-global-color-gray-50));
-}
 
-.t4AxIG_spectrum-Card--default.t4AxIG_is-hovered {
-  border-color: var(--spectrum-card-border-color-hover, var(--spectrum-global-color-gray-400));
-}
+  &.t4AxIG_is-hovered {
+    border-color: var(--spectrum-card-border-color-hover, var(--spectrum-global-color-gray-400));
 
-.t4AxIG_spectrum-Card--default.t4AxIG_is-hovered:before {
-  box-shadow: 0 0 0 1px var(--spectrum-card-border-color-hover, var(--spectrum-global-color-gray-400));
-}
+    &:before {
+      box-shadow: 0 0 0 1px var(--spectrum-card-border-color-hover, var(--spectrum-global-color-gray-400));
+    }
+  }
 
-.t4AxIG_spectrum-Card--default.t4AxIG_is-selected:before {
-  box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+  &.t4AxIG_is-selected {
+    border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
 
-.t4AxIG_spectrum-Card--default.t4AxIG_is-hovered.t4AxIG_is-selected {
-  border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+    &:before {
+      box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+    }
+  }
 
-.t4AxIG_spectrum-Card--default.t4AxIG_is-hovered.t4AxIG_is-selected:before {
-  box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+  &.t4AxIG_is-hovered.t4AxIG_is-selected {
+    border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
 
-.t4AxIG_spectrum-Card--default.t4AxIG_focus-ring {
-  border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+    &:before {
+      box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+    }
+  }
 
-.t4AxIG_spectrum-Card--default.t4AxIG_focus-ring:before {
-  box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+  &.t4AxIG_focus-ring {
+    border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
 
-.t4AxIG_spectrum-Card--default.t4AxIG_focus-ring.t4AxIG_is-hovered.t4AxIG_is-selected {
-  border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+    &:before {
+      box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+    }
+  }
 
-.t4AxIG_spectrum-Card--default.t4AxIG_focus-ring.t4AxIG_is-hovered.t4AxIG_is-selected:before {
-  box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+  &.t4AxIG_focus-ring.t4AxIG_is-hovered.t4AxIG_is-selected {
+    border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
 
-.t4AxIG_spectrum-Card--default.t4AxIG_is-selected {
-  border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+    &:before {
+      box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+    }
+  }
 
-.t4AxIG_spectrum-Card--default.t4AxIG_is-selected:after {
-  background-color: var(--spectrum-global-color-blue-400);
-  opacity: .15;
-}
+  &.t4AxIG_is-selected {
+    border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
 
-.t4AxIG_spectrum-Card--default.t4AxIG_is-selected.t4AxIG_is-hovered {
-  border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+    &:after {
+      background-color: var(--spectrum-global-color-blue-400);
+      opacity: .15;
+    }
 
-.t4AxIG_spectrum-Card--default.t4AxIG_is-selected.t4AxIG_is-hovered:after {
-  background-color: var(--spectrum-global-color-blue-400);
-  opacity: .25;
-}
+    &.t4AxIG_is-hovered {
+      border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
 
-.t4AxIG_spectrum-Card--default:before {
-  transition: background-color var(--spectrum-global-animation-duration-100, .13s);
-}
+      &:after {
+        background-color: var(--spectrum-global-color-blue-400);
+        opacity: .25;
+      }
+    }
+  }
+
+  &:before {
+    transition: background-color var(--spectrum-global-animation-duration-100, .13s);
+  }
 
-.t4AxIG_spectrum-Card--default:after {
-  transition: background-color var(--spectrum-global-animation-duration-100, .13s),
+  &:after {
+    transition: background-color var(--spectrum-global-animation-duration-100, .13s),
       opacity var(--spectrum-global-animation-duration-100, .13s);
-  opacity: 0;
-}
+    opacity: 0;
+  }
 
-.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-grid:before {
-  transition: background-color var(--spectrum-global-animation-duration-100, .13s);
-  background-color: var(--spectrum-card-quiet-preview-background-color, var(--spectrum-global-color-gray-200));
-}
+  & .t4AxIG_spectrum-Card-grid {
+    &:before {
+      transition: background-color var(--spectrum-global-animation-duration-100, .13s);
+      background-color: var(--spectrum-card-quiet-preview-background-color, var(--spectrum-global-color-gray-200));
+    }
+  }
 
-.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-image, .t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-illustration {
-  border-block-end-color: var(--spectrum-card-coverphoto-border-color, var(--spectrum-global-color-gray-200));
-}
+  & .t4AxIG_spectrum-Card-image, & .t4AxIG_spectrum-Card-illustration {
+    border-block-end-color: var(--spectrum-card-coverphoto-border-color, var(--spectrum-global-color-gray-200));
+  }
 
-.t4AxIG_spectrum-Card--default .t4AxIG_spectrum-Card-content {
-  color: var(--spectrum-card-description-text-color, var(--spectrum-global-color-gray-700));
+  & .t4AxIG_spectrum-Card-content {
+    color: var(--spectrum-card-description-text-color, var(--spectrum-global-color-gray-700));
+  }
 }
 
 .t4AxIG_spectrum-Card--isQuiet {
   background-color: #0000;
   border-color: #0000;
-}
 
-.t4AxIG_spectrum-Card--isQuiet.t4AxIG_is-hovered .t4AxIG_spectrum-Card-grid:before {
-  background-color: var(--spectrum-card-quiet-preview-background-color-hover, var(--spectrum-global-color-gray-300));
-  box-shadow: 0 0 0 1px var(--spectrum-card-border-color-hover, var(--spectrum-global-color-gray-400));
-}
+  &.t4AxIG_is-hovered {
+    & .t4AxIG_spectrum-Card-grid {
+      &:before {
+        background-color: var(--spectrum-card-quiet-preview-background-color-hover, var(--spectrum-global-color-gray-300));
+        box-shadow: 0 0 0 1px var(--spectrum-card-border-color-hover, var(--spectrum-global-color-gray-400));
+      }
+    }
+  }
 
-.t4AxIG_spectrum-Card--isQuiet.t4AxIG_is-selected .t4AxIG_spectrum-Card-grid:after, .t4AxIG_spectrum-Card--isQuiet.t4AxIG_is-hovered.t4AxIG_is-selected .t4AxIG_spectrum-Card-grid:after {
-  box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+  &.t4AxIG_is-selected {
+    & .t4AxIG_spectrum-Card-grid {
+      &:after {
+        box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+      }
+    }
+  }
 
-.t4AxIG_spectrum-Card--isQuiet.t4AxIG_focus-ring .t4AxIG_spectrum-Card-grid:after, .t4AxIG_spectrum-Card--isQuiet.t4AxIG_focus-ring.t4AxIG_is-hovered.t4AxIG_is-selected .t4AxIG_spectrum-Card-grid:after {
-  box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+  &.t4AxIG_is-hovered.t4AxIG_is-selected {
+    & .t4AxIG_spectrum-Card-grid {
+      &:after {
+        box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+      }
+    }
+  }
 
-.t4AxIG_spectrum-Card--isQuiet.t4AxIG_is-selected .t4AxIG_spectrum-Card-grid .t4AxIG_spectrum-Card-decoration {
-  opacity: .15;
-}
+  &.t4AxIG_focus-ring {
+    & .t4AxIG_spectrum-Card-grid {
+      &:after {
+        box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+      }
+    }
+  }
 
-.t4AxIG_spectrum-Card--isQuiet.t4AxIG_is-selected.t4AxIG_is-hovered .t4AxIG_spectrum-Card-grid .t4AxIG_spectrum-Card-decoration {
-  opacity: .25;
-}
+  &.t4AxIG_focus-ring.t4AxIG_is-hovered.t4AxIG_is-selected {
+    & .t4AxIG_spectrum-Card-grid {
+      &:after {
+        box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+      }
+    }
+  }
 
-.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-grid:before {
-  transition: background-color var(--spectrum-global-animation-duration-100, .13s);
-  background-color: var(--spectrum-card-quiet-preview-background-color, var(--spectrum-global-color-gray-200));
-}
+  &.t4AxIG_is-selected {
+    & .t4AxIG_spectrum-Card-grid {
+      & .t4AxIG_spectrum-Card-decoration {
+        opacity: .15;
+      }
+    }
+
+    &.t4AxIG_is-hovered {
+      & .t4AxIG_spectrum-Card-grid {
+        & .t4AxIG_spectrum-Card-decoration {
+          opacity: .25;
+        }
+      }
+    }
+  }
 
-.t4AxIG_spectrum-Card--isQuiet .t4AxIG_spectrum-Card-decoration {
-  transition: background-color var(--spectrum-global-animation-duration-100, .13s),
+  & .t4AxIG_spectrum-Card-grid {
+    &:before {
+      transition: background-color var(--spectrum-global-animation-duration-100, .13s);
+      background-color: var(--spectrum-card-quiet-preview-background-color, var(--spectrum-global-color-gray-200));
+    }
+  }
+
+  & .t4AxIG_spectrum-Card-decoration {
+    transition: background-color var(--spectrum-global-animation-duration-100, .13s),
       opacity var(--spectrum-global-animation-duration-100, .13s);
-  background-color: var(--spectrum-global-color-blue-400);
-  opacity: 0;
+    background-color: var(--spectrum-global-color-blue-400);
+    opacity: 0;
+  }
 }
 
 .t4AxIG_spectrum-Card--horizontal {
   border-color: var(--spectrum-card-border-color, var(--spectrum-global-color-gray-200));
   background-color: var(--spectrum-card-background-color, var(--spectrum-global-color-gray-50));
-}
-
-.t4AxIG_spectrum-Card--horizontal.t4AxIG_is-hovered {
-  border-color: var(--spectrum-card-border-color-hover, var(--spectrum-global-color-gray-400));
-}
-
-.t4AxIG_spectrum-Card--horizontal.t4AxIG_is-hovered .t4AxIG_spectrum-Card-grid:before {
-  box-shadow: 0 0 0 1px var(--spectrum-card-border-color-hover, var(--spectrum-global-color-gray-400));
-}
 
-.t4AxIG_spectrum-Card--horizontal.t4AxIG_is-selected .t4AxIG_spectrum-Card-grid:before {
-  box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+  &.t4AxIG_is-hovered {
+    border-color: var(--spectrum-card-border-color-hover, var(--spectrum-global-color-gray-400));
 
-.t4AxIG_spectrum-Card--horizontal.t4AxIG_is-hovered.t4AxIG_is-selected {
-  border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+    & .t4AxIG_spectrum-Card-grid {
+      &:before {
+        box-shadow: 0 0 0 1px var(--spectrum-card-border-color-hover, var(--spectrum-global-color-gray-400));
+      }
+    }
+  }
 
-.t4AxIG_spectrum-Card--horizontal.t4AxIG_is-hovered.t4AxIG_is-selected .t4AxIG_spectrum-Card-grid:before {
-  box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+  &.t4AxIG_is-selected {
+    border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
 
-.t4AxIG_spectrum-Card--horizontal.t4AxIG_focus-ring {
-  border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+    & .t4AxIG_spectrum-Card-grid {
+      &:before {
+        box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+      }
+    }
+  }
 
-.t4AxIG_spectrum-Card--horizontal.t4AxIG_focus-ring .t4AxIG_spectrum-Card-grid:before {
-  box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+  &.t4AxIG_is-hovered.t4AxIG_is-selected {
+    border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
 
-.t4AxIG_spectrum-Card--horizontal.t4AxIG_focus-ring.t4AxIG_is-hovered.t4AxIG_is-selected {
-  border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+    & .t4AxIG_spectrum-Card-grid {
+      &:before {
+        box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+      }
+    }
+  }
 
-.t4AxIG_spectrum-Card--horizontal.t4AxIG_focus-ring.t4AxIG_is-hovered.t4AxIG_is-selected .t4AxIG_spectrum-Card-grid:before {
-  box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+  &.t4AxIG_focus-ring {
+    border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
 
-.t4AxIG_spectrum-Card--horizontal.t4AxIG_is-selected {
-  border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+    & .t4AxIG_spectrum-Card-grid {
+      &:before {
+        box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+      }
+    }
+  }
 
-.t4AxIG_spectrum-Card--horizontal.t4AxIG_is-selected .t4AxIG_spectrum-Card-grid:after {
-  background-color: var(--spectrum-global-color-blue-400);
-  opacity: .15;
-}
+  &.t4AxIG_focus-ring.t4AxIG_is-hovered.t4AxIG_is-selected {
+    border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
 
-.t4AxIG_spectrum-Card--horizontal.t4AxIG_is-selected.t4AxIG_is-hovered {
-  border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+    & .t4AxIG_spectrum-Card-grid {
+      &:before {
+        box-shadow: 0 0 0 2px var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+      }
+    }
+  }
 
-.t4AxIG_spectrum-Card--horizontal.t4AxIG_is-selected.t4AxIG_is-hovered .t4AxIG_spectrum-Card-grid:after {
-  background-color: var(--spectrum-global-color-blue-400);
-  opacity: .25;
-}
+  &.t4AxIG_is-selected {
+    border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+
+    & .t4AxIG_spectrum-Card-grid {
+      &:after {
+        background-color: var(--spectrum-global-color-blue-400);
+        opacity: .15;
+      }
+    }
+
+    &.t4AxIG_is-hovered {
+      border-color: var(--spectrum-card-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+
+      & .t4AxIG_spectrum-Card-grid {
+        &:after {
+          background-color: var(--spectrum-global-color-blue-400);
+          opacity: .25;
+        }
+      }
+    }
+  }
 
-.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-grid:after {
-  transition: background-color var(--spectrum-global-animation-duration-100, .13s),
+  & .t4AxIG_spectrum-Card-grid {
+    &:after {
+      transition: background-color var(--spectrum-global-animation-duration-100, .13s),
         opacity var(--spectrum-global-animation-duration-100, .13s);
-  opacity: 0;
-}
+      opacity: 0;
+    }
+  }
 
-.t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-image, .t4AxIG_spectrum-Card--horizontal .t4AxIG_spectrum-Card-illustration {
-  border-inline-end-color: var(--spectrum-card-coverphoto-border-color, var(--spectrum-global-color-gray-200));
+  & .t4AxIG_spectrum-Card-image, & .t4AxIG_spectrum-Card-illustration {
+    border-inline-end-color: var(--spectrum-card-coverphoto-border-color, var(--spectrum-global-color-gray-200));
+  }
 }
 /*# sourceMappingURL=card_vars.css.map */