From ca233044733ea4408cdee4d65cfe7d330cb9848b Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Thu, 12 Dec 2024 14:26:36 +0200
Subject: [PATCH 1/6] docs(card): demo of cards in flex container

---
 elements/rh-card/demo/in-flex-container.html | 104 +++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 elements/rh-card/demo/in-flex-container.html

diff --git a/elements/rh-card/demo/in-flex-container.html b/elements/rh-card/demo/in-flex-container.html
new file mode 100644
index 0000000000..2b819af8cc
--- /dev/null
+++ b/elements/rh-card/demo/in-flex-container.html
@@ -0,0 +1,104 @@
+<div class="flex">
+  <rh-card>
+    <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 522 191.4">
+      <defs>
+        <clipPath id="clippath">
+          <path fill="none" d="M0 0h522v191.4H0z"/>
+        </clipPath>
+      </defs>
+      <g clip-path="url(#clippath)">
+        <path fill="#f2f2f2" d="M0 0h522v192H0z"/>
+        <path stroke="#e0e0e0" fill="#fff" d="M91.58 36.98c-3.97 0-7.8.6-11.4 1.71-8.67-16.31-25.83-27.42-45.6-27.42-21.98 0-40.74 13.75-48.18 33.11-14.05.47-26.01 9.19-31.17 21.48-1.96-.5-4.02-.77-6.15-.77-13.65 0-24.71 11.06-24.71 24.71s11.06 24.71 24.71 24.71h142.5c21.41 0 38.76-17.35 38.76-38.76s-17.35-38.76-38.76-38.76Z"/>
+        <path fill="none" stroke-miterlimit="10" stroke="#e00" stroke-width="2" d="M199.89 39.05s-71.29.75-116.93 20.8c-40.09 17.62-57.7 44.65-35.23 84.73 22.47 40.09 94.76 11.66 154.89-21.87"/>
+        <circle fill="#e00" cx="45.66" cy="140.72" r="6.64"/>
+        <path fill="none" stroke-miterlimit="10" stroke="#e00" stroke-width="2" d="M474.13 59.86s-16.4-43.08-75.32-30.5c-58.92 12.58-93.53 29.34-93.53 29.34"/>
+        <circle fill="#e00" cx="401.67" cy="29.29" r="6.64"/>
+        <rect fill="#c7c7c7" x="176.13" y="54.57" width="103.41" height="30.98" rx="3" ry="3"/>
+        <rect fill="#c7c7c7" x="176.13" y="90.59" width="103.41" height="30.98" rx="3" ry="3"/>
+        <rect fill="#c7c7c7" x="176.13" y="126.62" width="103.41" height="30.98" rx="3" ry="3"/>
+        <path fill="#c7c7c7" d="M183.36 18.43h162.79V179.4H183.36z"/>
+        <path fill="#e0e0e0" d="M181.97 33.43h162.79V178H181.97z"/>
+        <path fill="#fff" d="M182.47 17.53h161.79v16.01H182.47z"/>
+        <path fill="#e0e0e0" d="M343.76 18.03v15.01H182.97V18.03h160.79m1-1H181.97v17.01h162.79V17.03Z"/>
+        <path fill="#fff" d="M190.47 39.05h101.59v132.57H190.47zM297.53 39.05h42.37v47.16h-42.37zM297.53 92.81h42.37v78.81h-42.37z"/>
+        <circle fill="#e00" cx="305.12" cy="25.72" r="3.64"/>
+        <circle fill="#e00" cx="319.55" cy="25.72" r="3.64"/>
+        <circle fill="#e00" cx="333.21" cy="25.72" r="3.64"/>
+        <rect fill="#fce3e3" x="175.44" y="53.18" width="103.41" height="30.98" rx="3" ry="3"/>
+        <rect fill="#e00" x="185" y="59.86" width="5.16" height="17.62" rx="2" ry="2"/>
+        <rect fill="#e00" x="194.72" y="59.86" width="5.16" height="17.62" rx="2" ry="2"/>
+        <circle fill="#e00" cx="261.54" cy="62.63" r="2.73"/>
+        <circle fill="#e00" cx="269.17" cy="62.63" r="2.73"/>
+        <rect fill="#fce3e3" x="175.44" y="89.2" width="103.41" height="30.98" rx="3" ry="3"/>
+        <rect fill="#e00" x="185" y="95.88" width="5.16" height="17.62" rx="2" ry="2"/>
+        <rect fill="#e00" x="194.72" y="95.88" width="5.16" height="17.62" rx="2" ry="2"/>
+        <circle fill="#e00" cx="261.54" cy="98.66" r="2.73"/>
+        <circle fill="#e00" cx="269.17" cy="98.66" r="2.73"/>
+        <rect fill="#fce3e3" x="175.44" y="125.23" width="103.41" height="30.98" rx="3" ry="3"/>
+        <rect fill="#e00" x="185" y="131.91" width="5.16" height="17.62" rx="2" ry="2"/>
+        <rect fill="#e00" x="194.72" y="131.91" width="5.16" height="17.62" rx="2" ry="2"/>
+        <circle fill="#e00" cx="261.54" cy="134.69" r="2.73"/>
+        <circle fill="#e00" cx="269.17" cy="134.69" r="2.73"/>
+        <path stroke="#e0e0e0" fill="#fff" d="M515.7 74.04c-4.48 0-8.81.68-12.88 1.93-9.8-18.42-29.18-30.97-51.5-30.97-24.83 0-46.02 15.53-54.42 37.4-15.87.53-29.38 10.38-35.2 24.26a27.9 27.9 0 0 0-6.94-.87c-15.41 0-27.91 12.49-27.91 27.91 0 15.41 12.5 27.91 27.91 27.91h160.95c24.18 0 43.78-19.6 43.78-43.78s-19.6-43.78-43.78-43.78Z"/>
+      </g>
+    </svg>
+    <h3 slot="header">Migrate virtual machines with minimal disruption</h3>
+    <p>Moving your VMs to a unified platform will help you reliably and flexibly deploy applications across the hybrid cloud.</p>
+    <rh-cta slot="footer" href="#">Call to action</rh-cta>
+  </rh-card>
+
+  <rh-card>
+    <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 522 191.4">
+      <g clip-path="url(#clippath)">
+        <path fill="#f2f2f2" d="M0 0h522v192H0z"/>
+        <path stroke="#e0e0e0" fill="#fff" d="M91.58 36.98c-3.97 0-7.8.6-11.4 1.71-8.67-16.31-25.83-27.42-45.6-27.42-21.98 0-40.74 13.75-48.18 33.11-14.05.47-26.01 9.19-31.17 21.48-1.96-.5-4.02-.77-6.15-.77-13.65 0-24.71 11.06-24.71 24.71s11.06 24.71 24.71 24.71h142.5c21.41 0 38.76-17.35 38.76-38.76s-17.35-38.76-38.76-38.76Z"/>
+        <path fill="none" stroke-miterlimit="10" stroke="#e00" stroke-width="2" d="M199.89 39.05s-71.29.75-116.93 20.8c-40.09 17.62-57.7 44.65-35.23 84.73 22.47 40.09 94.76 11.66 154.89-21.87"/>
+        <circle fill="#e00" cx="45.66" cy="140.72" r="6.64"/>
+        <path fill="none" stroke-miterlimit="10" stroke="#e00" stroke-width="2" d="M474.13 59.86s-16.4-43.08-75.32-30.5c-58.92 12.58-93.53 29.34-93.53 29.34"/>
+        <circle fill="#e00" cx="401.67" cy="29.29" r="6.64"/>
+        <rect fill="#c7c7c7" x="176.13" y="54.57" width="103.41" height="30.98" rx="3" ry="3"/>
+        <rect fill="#c7c7c7" x="176.13" y="90.59" width="103.41" height="30.98" rx="3" ry="3"/>
+        <rect fill="#c7c7c7" x="176.13" y="126.62" width="103.41" height="30.98" rx="3" ry="3"/>
+        <path fill="#c7c7c7" d="M183.36 18.43h162.79V179.4H183.36z"/>
+        <path fill="#e0e0e0" d="M181.97 33.43h162.79V178H181.97z"/>
+        <path fill="#fff" d="M182.47 17.53h161.79v16.01H182.47z"/>
+        <path fill="#e0e0e0" d="M343.76 18.03v15.01H182.97V18.03h160.79m1-1H181.97v17.01h162.79V17.03Z"/>
+        <path fill="#fff" d="M190.47 39.05h101.59v132.57H190.47zM297.53 39.05h42.37v47.16h-42.37zM297.53 92.81h42.37v78.81h-42.37z"/>
+        <circle fill="#e00" cx="305.12" cy="25.72" r="3.64"/>
+        <circle fill="#e00" cx="319.55" cy="25.72" r="3.64"/>
+        <circle fill="#e00" cx="333.21" cy="25.72" r="3.64"/>
+        <rect fill="#fce3e3" x="175.44" y="53.18" width="103.41" height="30.98" rx="3" ry="3"/>
+        <rect fill="#e00" x="185" y="59.86" width="5.16" height="17.62" rx="2" ry="2"/>
+        <rect fill="#e00" x="194.72" y="59.86" width="5.16" height="17.62" rx="2" ry="2"/>
+        <circle fill="#e00" cx="261.54" cy="62.63" r="2.73"/>
+        <circle fill="#e00" cx="269.17" cy="62.63" r="2.73"/>
+        <rect fill="#fce3e3" x="175.44" y="89.2" width="103.41" height="30.98" rx="3" ry="3"/>
+        <rect fill="#e00" x="185" y="95.88" width="5.16" height="17.62" rx="2" ry="2"/>
+        <rect fill="#e00" x="194.72" y="95.88" width="5.16" height="17.62" rx="2" ry="2"/>
+        <circle fill="#e00" cx="261.54" cy="98.66" r="2.73"/>
+        <circle fill="#e00" cx="269.17" cy="98.66" r="2.73"/>
+        <rect fill="#fce3e3" x="175.44" y="125.23" width="103.41" height="30.98" rx="3" ry="3"/>
+        <rect fill="#e00" x="185" y="131.91" width="5.16" height="17.62" rx="2" ry="2"/>
+        <rect fill="#e00" x="194.72" y="131.91" width="5.16" height="17.62" rx="2" ry="2"/>
+        <circle fill="#e00" cx="261.54" cy="134.69" r="2.73"/>
+        <circle fill="#e00" cx="269.17" cy="134.69" r="2.73"/>
+        <path stroke="#e0e0e0" fill="#fff" d="M515.7 74.04c-4.48 0-8.81.68-12.88 1.93-9.8-18.42-29.18-30.97-51.5-30.97-24.83 0-46.02 15.53-54.42 37.4-15.87.53-29.38 10.38-35.2 24.26a27.9 27.9 0 0 0-6.94-.87c-15.41 0-27.91 12.49-27.91 27.91 0 15.41 12.5 27.91 27.91 27.91h160.95c24.18 0 43.78-19.6 43.78-43.78s-19.6-43.78-43.78-43.78Z"/>
+      </g>
+    </svg>
+    <h3 slot="header">Migrate virtual machines with minimal disruption</h3>
+    <p>Moving your VMs to a unified platform will help you reliably and flexibly deploy applications across the hybrid cloud.</p>
+    <rh-cta slot="footer" href="#">Call to action</rh-cta>
+  </rh-card>
+</div>
+
+<style>
+.flex {
+  display: flex;;
+}
+</style>
+
+<script type="module">
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-card/rh-card.js';
+</script>
+

From b70f6f877e8294465b18bc8de11d2a53c06c79b0 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Fri, 13 Dec 2024 12:43:30 -0500
Subject: [PATCH 2/6] fix(card): nest css and remove :host attribute styles

---
 elements/rh-card/rh-card.css | 491 +++++++++++++++++------------------
 elements/rh-card/rh-card.ts  |   3 +-
 2 files changed, 246 insertions(+), 248 deletions(-)

diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css
index 2707dfb2ee..50b3e95f2c 100644
--- a/elements/rh-card/rh-card.css
+++ b/elements/rh-card/rh-card.css
@@ -1,15 +1,8 @@
 :host {
   display: block;
-  container-name: card;
   container-type: inline-size;
   height: max-content;
-}
-
-#header.empty,
-#image.empty,
-#footer.empty,
-#body.empty {
-  display: none !important;
+  width: 100%;
 }
 
 ::slotted(*) {
@@ -25,70 +18,21 @@
 ::slotted(a:visited:focus-within) { color: var(--rh-color-interactive-primary-visited-focus); }
 ::slotted(a:visited:active) { color: var(--rh-color-interactive-primary-visited-active); }
 
-#container {
-  align-self: stretch;
-  display: flex;
-  flex-direction: column;
-  justify-items: flex-start;
-  overflow: hidden;
-  border-radius: var(--_border-radius, var(--rh-border-width-lg, 3px));
-  font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif) !important;
-  line-height: var(--rh-line-height-body-text, 1.5);
-  border-style: solid;
-  border-width: var(--rh-border-width-sm, 1px);
-  border-color: var(--rh-color-border-subtle);
-  width: 100%;
-  height: 100%;
-  background-color: var(--rh-color-surface);
-  color: var(--rh-color-text-primary);
-}
-
-.on.light {
-  --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
-}
-
-.on.dark {
-  --rh-color-surface: var(--rh-color-surface-darkest, #151515);
-}
-
-#container.on.palette-light {
-  --rh-color-surface: var(--rh-color-surface-light, #e0e0e0);
-}
-
-#container.on.palette-lighter {
-  --rh-color-surface: var(--rh-color-surface-lighter, #f2f2f2);
-}
-
-#container.on.palette-lightest {
-  --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
-}
-
-#container.on.palette-dark {
-  --rh-color-surface: var(--rh-color-surface-dark, #383838);
-}
-
-#container.on.palette-darker {
-  --rh-color-surface: var(--rh-color-surface-darker, #1f1f1f);
-}
-
-#container.on.palette-darkest {
-  --rh-color-surface: var(--rh-color-surface-darkest, #151515);
-}
-
 #header,
 #body,
 #footer {
   margin-inline: var(--rh-space-xl, 24px);
-}
 
-#header ::slotted(:is(h1, h2, h3, h4, h5, h6)),
-#body ::slotted(:is(h1, h2, h3, h4, h5, h6)) {
-  font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif);
+  @container (min-width: 768px) { 
+    margin-inline: var(--rh-space-2xl, 32px);
+  }
 }
 
-#image ::slotted(*) {
-  display: block;
-  max-width: 100%;
+#header,
+#body {
+  @container (min-width: 768px) {
+    margin-block-start: var(--rh-space-2xl, 32px);
+  }
 }
 
 #header {
@@ -105,35 +49,20 @@
   background-color: var(--_header-bg, transparent);
 }
 
-:is(#container, #container.light, #container.lighter, #container.lightest) {
-  --_header-bg: var(--rh-card-header-background-on-light, transparent);
-}
-
-:is(#container.dark, #container.darker, #container.darkest) {
-  --_header-bg: var(--rh-card-header-background-on-dark, transparent);
-}
-
-#body {
-  margin-block: var(--rh-space-2xl, 32px) var(--rh-space-xl, 24px);
-}
-
-#body:has(+ .empty) {
-  margin-block-end: var(--rh-space-2xl, 32px);
-}
-
-#footer {
-  display: flex;
-  gap: 0.5em;
-  margin-block: auto var(--rh-space-xl, 24px);
-}
-
-#container #header ::slotted(:is(h1, h2, h3, h4, h5, h6)),
-#container #body ::slotted(:is(h1, h2, h3, h4, h5, h6)) {
-  font-family: inherit !important;
+#header ::slotted(:is(h1, h2, h3, h4, h5, h6)),
+#body ::slotted(:is(h1, h2, h3, h4, h5, h6)) {
+  font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif);
   font-weight: inherit !important;
   line-height: var(--rh-line-height-heading, 1.3) !important;
 }
 
+#header.empty,
+#image.empty,
+#footer.empty,
+#body.empty {
+  display: none !important;
+}
+
 #header ::slotted(:is(h1, h2, h3, h4, h5, h6)) {
   font-size: inherit !important;
   margin: unset !important;
@@ -143,187 +72,255 @@
   font-size: var(--rh-card-heading-font-size, var(--rh-font-size-heading-sm, 1.5rem)) !important;
 }
 
-#body ::slotted(:not([slot]):first-child) {
-  margin-block-start: 0;
+#image ::slotted(*) {
+  display: block;
+  max-width: 100%;
 }
 
-#body ::slotted(:not([slot]):last-child) {
-  margin-block-end: 0;
-}
+#body {
+  margin-block: var(--rh-space-2xl, 32px) var(--rh-space-xl, 24px);
 
-@container card (min-width: 768px) {
-  #header,
-  #body,
-  #footer {
-    margin-inline: var(--rh-space-2xl, 32px);
+  &:has(+ .empty) {
+    margin-block-end: var(--rh-space-2xl, 32px);
   }
 
-  #header,
-  #body {
-    margin-block-start: var(--rh-space-2xl, 32px);
+  ::slotted(:not([slot]):first-child) {
+    margin-block-start: 0;
   }
 
-  #footer {
-    margin-block-end: var(--rh-space-2xl, 32px);
+  ::slotted(:not([slot]):last-child) {
+    margin-block-end: 0;
   }
 }
 
-/* promo */
-:host([variant='promo']) {
-  display: block;
-  container-name: card promo;
-}
-
-#container.promo {
-  --_promo-heading-font-weight:
-    var(--rh-card-heading-font-weight,
-      var(--rh-font-weight-body-text-medium, 500));
-  --_promo-heading-size: var(--rh-card-heading-font-size, var(--rh-font-size-heading-xs, 1.25rem));
-  --_promo-paragraph-font-size: var(--rh-font-size-body-text-lg, 1.125rem);
-  --_promo-paragraph-margin-block-end: var(--rh-space-lg, 16px);
-  --_promo-standard-inline-padding: var(--rh-space-2xl, 32px);
-
-  height: auto;
-}
-
-#container.promo:not(.standard, .has-image) {
-  grid-template-columns: auto;
-}
-
-.promo #body {
-  margin: var(--rh-space-2xl, 32px);
-}
-
-.promo.has-image #body {
-  order: -5;
-}
-
-.promo.has-header #header {
-  margin: 0;
-  margin-block-end: var(--rh-space-lg, 16px);
-}
-
-.promo.has-footer #footer {
-  margin-block: var(--rh-space-xl, 24px) 0;
-  margin-inline: 0;
-}
-
-.promo #header ::slotted(*) {
-  font-family: var(--rh-card-heading-font-family, var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif)) !important;
-  font-size: var(--_promo-heading-size) !important;
-  font-weight: var(--_promo-heading-font-weight) !important;
-  margin-block: 0 var(--_promo-heading-margin-block-end) !important;
-}
-
-.promo:is(.has-image, .has-header) #body ::slotted(p) {
-  font-size: var(--_promo-paragraph-font-size) !important;
-  margin-block-end: var(--_promo-paragraph-margin-block-end) !important;
-}
-
-#container.promo.standard {
+#footer {
   display: flex;
-  padding: var(--_promo-standard-inline-padding);
-  width: auto;
-}
-
-#container.promo.standard.dark {
-  background-color: var(--rh-color-surface-darker, #1f1f1f);
-}
-
-.promo.standard #body {
-  display: contents;
-}
-
-.promo.standard #body ::slotted(:not([slot])) {
-  font-family: var(--rh-card-heading-font-family, var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif)) !important;
-  font-size: var(--rh-font-size-body-text-xl, 1.25rem) !important;
-  font-weight: var(--rh-font-weight-body-text-medium, 500);
-  line-height: var(--rh-line-height-heading, 1.3) !important;
-}
-
-:host([variant='promo'][full-width]) #container {
-  border-color: transparent;
-  padding-block: var(--rh-space-4xl, 64px);
-  padding-inline: var(--rh-space-lg, 16px);
-  width: auto;
-}
-
-:host([variant='promo'][full-width]) #body {
-  margin: 0;
-}
-
-:host([variant='promo'][full-width]) #body ::slotted(p) {
-  --_promo-paragraph-font-size: var(--rh-font-size-body-text-md, 1rem);
-}
+  gap: 0.5em;
+  margin-block: auto var(--rh-space-xl, 24px);
 
-:host([variant='promo'][full-width]) #header ::slotted(*) {
-  --_promo-heading-size:
-    var(--rh-card-heading-font-size,
-      var(--rh-font-size-body-text-2xl, 1.5rem));
+  @container (min-width: 768px) {
+    margin-block-end: var(--rh-space-2xl, 32px);
+  }
 }
 
-:host([variant='promo'][full-width]) .has-image #footer {
-  margin-block-end: var(--rh-space-2xl, 32px);
-}
+#container {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  justify-items: flex-start;
+  overflow: hidden;
+  border-radius: var(--_border-radius, var(--rh-border-width-lg, 3px));
+  font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif) !important;
+  line-height: var(--rh-line-height-body-text, 1.5);
+  border-style: solid;
+  border-width: var(--rh-border-width-sm, 1px);
+  border-color: var(--rh-color-border-subtle);
+  width: 100%;
+  height: 100%;
+  background-color: var(--rh-color-surface);
+  color: var(--rh-color-text-primary);
 
-@container promo (min-width: 768px) {
-  #container.promo {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-    min-height: 250px;
-  }
+  &.on {
+    &:is(.light, .lighter, .lightest) {
+      --_header-bg: var(--rh-card-header-background-on-light, transparent);
+    }
 
-  .promo #image {
-    justify-self: end;
-  }
+    &:is(.dark, .darker, .darkest) {
+      --_header-bg: var(--rh-card-header-background-on-dark, transparent);
+    }
 
-  .promo #body {
-    margin: var(--rh-space-3xl, 48px);
-    max-width: 70ch;
-  }
+    &:is(.light, .palette-lightest) {
+      --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
+    }
 
-  .promo #header ::slotted(*) {
-    --_promo-heading-size: var(--rh-card-heading-font-size, var(--rh-font-size-heading-sm, 1.5rem));
-  }
+    &:is(.dark, .palette-darkest) {
+      --rh-color-surface: var(--rh-color-surface-darkest, #151515);
+    }
 
-  #container.promo.standard {
-    --_promo-standard-inline-padding: var(--rh-space-3xl, 48px);
+    &.palette-light {
+      --rh-color-surface: var(--rh-color-surface-light, #e0e0e0);
+    }
 
-    column-gap: var(--rh-space-xl, 24px);
-    flex-direction: row;
-    justify-content: space-between;
-    min-height: auto;
-  }
+    &.palette-lighter {
+      --rh-color-surface: var(--rh-color-surface-lighter, #f2f2f2);
+    }
 
-  .promo.standard #footer {
-    flex: 0 0 auto;
-    margin-block: 0;
-  }
+    &.palette-dark {
+      --rh-color-surface: var(--rh-color-surface-dark, #383838);
+    }
 
-  :host([variant='promo'][full-width]) #container {
-    column-gap: var(--rh-space-2xl, 32px);
-    min-height: auto;
-    padding-inline: var(--rh-space-4xl, 64px);
+    &.palette-darker {
+      --rh-color-surface: var(--rh-color-surface-darker, #1f1f1f);
+    }
   }
 
-  :host([variant='promo'][full-width]) #body ::slotted(p) {
+  &.promo {
+    --_promo-heading-font-weight:
+      var(--rh-card-heading-font-weight,
+        var(--rh-font-weight-body-text-medium, 500));
+    --_promo-heading-size: var(--rh-card-heading-font-size, var(--rh-font-size-heading-xs, 1.25rem));
     --_promo-paragraph-font-size: var(--rh-font-size-body-text-lg, 1.125rem);
-  }
-
-  :host([variant='promo'][full-width]) #header ::slotted(*) {
-    --_promo-heading-size:
-      var(--rh-card-heading-font-size,
-        var(--rh-font-size-heading-md, 1.75rem));
-  }
-
-  :host([variant='promo'][full-width]) .has-image #footer {
-    margin-block-end: 0;
-  }
-}
-
-@container promo (min-width: 1200px) {
-  :host([variant='promo'][full-width]) #container {
-    padding-inline: var(--rh-space-7xl, 128px);
+    --_promo-paragraph-margin-block-end: var(--rh-space-lg, 16px);
+    --_promo-standard-inline-padding: var(--rh-space-2xl, 32px);
+
+    height: auto;
+
+    @container (min-width: 768px) {
+      align-items: center;
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      min-height: 250px;
+    }
+
+    &:not(.standard, .has-image) {
+      grid-template-columns: auto;
+    }
+
+    #body {
+      margin: var(--rh-space-2xl, 32px);
+
+      @container (min-width: 768px) {
+        margin: var(--rh-space-3xl, 48px);
+        max-width: 70ch;
+      }
+    }
+
+    #header {
+      & ::slotted(*) {
+        font-family: var(--rh-card-heading-font-family, var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif)) !important;
+        font-size: var(--_promo-heading-size) !important;
+        font-weight: var(--_promo-heading-font-weight) !important;
+        margin-block: 0 var(--_promo-heading-margin-block-end) !important;
+      }
+
+      @container (min-width: 768px) {
+        & ::slotted(*) {
+          --_promo-heading-size: var(--rh-card-heading-font-size, var(--rh-font-size-heading-sm, 1.5rem));
+        }
+      }
+    }
+
+    #image {
+      @container (min-width: 768px) {
+        justify-self: end;
+      }
+    }
+
+    &.has-image {
+      #body {
+        order: -5;
+      }
+    }
+
+    &.has-header {
+      #header {
+        margin: 0;
+        margin-block-end: var(--rh-space-lg, 16px);
+      }
+    }
+
+    &.has-footer {
+      #footer {
+        margin-block: var(--rh-space-xl, 24px) 0;
+        margin-inline: 0;
+      }
+    }
+
+    &:is(.has-image, .has-header) {
+      #body {
+        & ::slotted(p) {
+          font-size: var(--_promo-paragraph-font-size) !important;
+          margin-block-end: var(--_promo-paragraph-margin-block-end) !important;
+        }
+      }
+    }
+
+    &.standard {
+      display: flex;
+      padding: var(--_promo-standard-inline-padding);
+      width: auto;
+
+      #body {
+        display: contents;
+
+        & ::slotted(:not([slot])) {
+          font-family: var(--rh-card-heading-font-family, var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif)) !important;
+          font-size: var(--rh-font-size-body-text-xl, 1.25rem) !important;
+          font-weight: var(--rh-font-weight-body-text-medium, 500);
+          line-height: var(--rh-line-height-heading, 1.3) !important;
+        }
+      }
+
+      &.dark {
+        background-color: var(--rh-color-surface-darker, #1f1f1f);
+      }
+
+      @container (min-width: 768px) {
+        --_promo-standard-inline-padding: var(--rh-space-3xl, 48px);
+
+        column-gap: var(--rh-space-xl, 24px);
+        flex-direction: row;
+        justify-content: space-between;
+        min-height: auto;
+
+        #footer {
+          flex: 0 0 auto;
+          margin-block: 0;
+        }
+      }
+    }
+
+    &.full-width {
+      border-color: transparent;
+      padding-block: var(--rh-space-4xl, 64px);
+      padding-inline: var(--rh-space-lg, 16px);
+      width: auto;
+
+      #body {
+        margin: 0;
+
+        & ::slotted(p) {
+          --_promo-paragraph-font-size: var(--rh-font-size-body-text-md, 1rem);
+
+          @container (min-width: 768px) {
+            --_promo-paragraph-font-size: var(--rh-font-size-body-text-lg, 1.125rem);
+          }
+        }
+      }
+
+      #header {
+        & ::slotted(*) {
+          --_promo-heading-size:
+            var(--rh-card-heading-font-size,
+              var(--rh-font-size-body-text-2xl, 1.5rem));
+
+          @container (min-width: 768px) {
+            --_promo-heading-size:
+              var(--rh-card-heading-font-size,
+                var(--rh-font-size-heading-md, 1.75rem));
+          }
+        }
+      }
+
+      &.has-image {
+        #footer {
+          margin-block-end: var(--rh-space-2xl, 32px);
+
+          @container (min-width: 768px) {
+            margin-block-end: 0;
+          }
+        }
+      }
+
+      @container (min-width: 768px) {
+        column-gap: var(--rh-space-2xl, 32px);
+        min-height: auto;
+        padding-inline: var(--rh-space-4xl, 64px);
+      }
+
+      @container (min-width: 1200px) {
+        padding-inline: var(--rh-space-7xl, 128px);
+      }
+    }
   }
 }
diff --git a/elements/rh-card/rh-card.ts b/elements/rh-card/rh-card.ts
index 4b5785f3c9..713e2a219e 100644
--- a/elements/rh-card/rh-card.ts
+++ b/elements/rh-card/rh-card.ts
@@ -112,7 +112,7 @@ export class RhCard extends LitElement {
     const computedPalette = this.#computedPalette;
     const computedContext = this.#computedContext;
     const on = computedContext ?? this.on ?? 'light';
-    const { variant = '' } = this;
+    const { variant = '', fullWidth = '' } = this;
     const hasHeader = this.#slots.hasSlotted('header');
     const hasFooter = this.#slots.hasSlotted('footer');
     const hasImage = this.#slots.hasSlotted('image');
@@ -137,6 +137,7 @@ export class RhCard extends LitElement {
             'on': true,
             [on]: true,
             [variant]: !!variant,
+            'full-width': fullWidth,
             [`palette-${computedPalette}`]: !!computedPalette,
             'palette': !!this.colorPalette,
             'has-body': hasBody,

From 157609010bdab78e33d28dfe70f0d34ef41a962d Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Fri, 13 Dec 2024 12:43:45 -0500
Subject: [PATCH 3/6] fix(card): add gap to flex demo

---
 elements/rh-card/demo/in-flex-container.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/elements/rh-card/demo/in-flex-container.html b/elements/rh-card/demo/in-flex-container.html
index 2b819af8cc..22f56c9cd3 100644
--- a/elements/rh-card/demo/in-flex-container.html
+++ b/elements/rh-card/demo/in-flex-container.html
@@ -93,7 +93,8 @@ <h3 slot="header">Migrate virtual machines with minimal disruption</h3>
 
 <style>
 .flex {
-  display: flex;;
+  display: flex;
+  gap: var(--rh-space-2xl);
 }
 </style>
 

From 211f81fc5e5386355f0d70a6192d3b1d16347421 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Fri, 13 Dec 2024 13:04:22 -0500
Subject: [PATCH 4/6] chore(card): lint css

---
 elements/rh-card/rh-card.css | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css
index 50b3e95f2c..10f9f13b85 100644
--- a/elements/rh-card/rh-card.css
+++ b/elements/rh-card/rh-card.css
@@ -19,19 +19,19 @@
 ::slotted(a:visited:active) { color: var(--rh-color-interactive-primary-visited-active); }
 
 #header,
-#body,
-#footer {
-  margin-inline: var(--rh-space-xl, 24px);
-
-  @container (min-width: 768px) { 
-    margin-inline: var(--rh-space-2xl, 32px);
+#body {
+  @container (min-width: 768px) {
+    margin-block-start: var(--rh-space-2xl, 32px);
   }
 }
 
 #header,
-#body {
+#body,
+#footer {
+  margin-inline: var(--rh-space-xl, 24px);
+
   @container (min-width: 768px) {
-    margin-block-start: var(--rh-space-2xl, 32px);
+    margin-inline: var(--rh-space-2xl, 32px);
   }
 }
 
@@ -158,7 +158,9 @@
     --_promo-heading-font-weight:
       var(--rh-card-heading-font-weight,
         var(--rh-font-weight-body-text-medium, 500));
-    --_promo-heading-size: var(--rh-card-heading-font-size, var(--rh-font-size-heading-xs, 1.25rem));
+    --_promo-heading-size:
+      var(--rh-card-heading-font-size,
+        var(--rh-font-size-heading-xs, 1.25rem));
     --_promo-paragraph-font-size: var(--rh-font-size-body-text-lg, 1.125rem);
     --_promo-paragraph-margin-block-end: var(--rh-space-lg, 16px);
     --_promo-standard-inline-padding: var(--rh-space-2xl, 32px);
@@ -195,7 +197,9 @@
 
       @container (min-width: 768px) {
         & ::slotted(*) {
-          --_promo-heading-size: var(--rh-card-heading-font-size, var(--rh-font-size-heading-sm, 1.5rem));
+          --_promo-heading-size:
+            var(--rh-card-heading-font-size,
+              var(--rh-font-size-heading-sm, 1.5rem));
         }
       }
     }

From 250191baa79b396935d27da86b9b18cbaa3d39c6 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Mon, 16 Dec 2024 10:15:37 -0500
Subject: [PATCH 5/6] fix(card): revert css nesting

---
 elements/rh-card/rh-card.css | 492 +++++++++++++++++------------------
 1 file changed, 246 insertions(+), 246 deletions(-)

diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css
index 10f9f13b85..bde30d86fa 100644
--- a/elements/rh-card/rh-card.css
+++ b/elements/rh-card/rh-card.css
@@ -1,10 +1,18 @@
 :host {
   display: block;
+  container-name: card;
   container-type: inline-size;
   height: max-content;
   width: 100%;
 }
 
+#header.empty,
+#image.empty,
+#footer.empty,
+#body.empty {
+  display: none !important;
+}
+
 ::slotted(*) {
   line-height: inherit;
 }
@@ -18,21 +26,70 @@
 ::slotted(a:visited:focus-within) { color: var(--rh-color-interactive-primary-visited-focus); }
 ::slotted(a:visited:active) { color: var(--rh-color-interactive-primary-visited-active); }
 
-#header,
-#body {
-  @container (min-width: 768px) {
-    margin-block-start: var(--rh-space-2xl, 32px);
-  }
+#container {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  justify-items: flex-start;
+  overflow: hidden;
+  border-radius: var(--_border-radius, var(--rh-border-width-lg, 3px));
+  font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif) !important;
+  line-height: var(--rh-line-height-body-text, 1.5);
+  border-style: solid;
+  border-width: var(--rh-border-width-sm, 1px);
+  border-color: var(--rh-color-border-subtle);
+  width: 100%;
+  height: 100%;
+  background-color: var(--rh-color-surface);
+  color: var(--rh-color-text-primary);
+}
+
+.on.light {
+  --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
+}
+
+.on.dark {
+  --rh-color-surface: var(--rh-color-surface-darkest, #151515);
+}
+
+#container.on.palette-light {
+  --rh-color-surface: var(--rh-color-surface-light, #e0e0e0);
+}
+
+#container.on.palette-lighter {
+  --rh-color-surface: var(--rh-color-surface-lighter, #f2f2f2);
+}
+
+#container.on.palette-lightest {
+  --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
+}
+
+#container.on.palette-dark {
+  --rh-color-surface: var(--rh-color-surface-dark, #383838);
+}
+
+#container.on.palette-darker {
+  --rh-color-surface: var(--rh-color-surface-darker, #1f1f1f);
+}
+
+#container.on.palette-darkest {
+  --rh-color-surface: var(--rh-color-surface-darkest, #151515);
 }
 
 #header,
 #body,
 #footer {
   margin-inline: var(--rh-space-xl, 24px);
+}
 
-  @container (min-width: 768px) {
-    margin-inline: var(--rh-space-2xl, 32px);
-  }
+#header ::slotted(:is(h1, h2, h3, h4, h5, h6)),
+#body ::slotted(:is(h1, h2, h3, h4, h5, h6)) {
+  font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif);
+}
+
+#image ::slotted(*) {
+  display: block;
+  max-width: 100%;
 }
 
 #header {
@@ -49,18 +106,33 @@
   background-color: var(--_header-bg, transparent);
 }
 
-#header ::slotted(:is(h1, h2, h3, h4, h5, h6)),
-#body ::slotted(:is(h1, h2, h3, h4, h5, h6)) {
-  font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif);
-  font-weight: inherit !important;
-  line-height: var(--rh-line-height-heading, 1.3) !important;
+:is(#container, #container.light, #container.lighter, #container.lightest) {
+  --_header-bg: var(--rh-card-header-background-on-light, transparent);
 }
 
-#header.empty,
-#image.empty,
-#footer.empty,
-#body.empty {
-  display: none !important;
+:is(#container.dark, #container.darker, #container.darkest) {
+  --_header-bg: var(--rh-card-header-background-on-dark, transparent);
+}
+
+#body {
+  margin-block: var(--rh-space-2xl, 32px) var(--rh-space-xl, 24px);
+}
+
+#body:has(+ .empty) {
+  margin-block-end: var(--rh-space-2xl, 32px);
+}
+
+#footer {
+  display: flex;
+  gap: 0.5em;
+  margin-block: auto var(--rh-space-xl, 24px);
+}
+
+#container #header ::slotted(:is(h1, h2, h3, h4, h5, h6)),
+#container #body ::slotted(:is(h1, h2, h3, h4, h5, h6)) {
+  font-family: inherit !important;
+  font-weight: inherit !important;
+  line-height: var(--rh-line-height-heading, 1.3) !important;
 }
 
 #header ::slotted(:is(h1, h2, h3, h4, h5, h6)) {
@@ -72,259 +144,187 @@
   font-size: var(--rh-card-heading-font-size, var(--rh-font-size-heading-sm, 1.5rem)) !important;
 }
 
-#image ::slotted(*) {
-  display: block;
-  max-width: 100%;
+#body ::slotted(:not([slot]):first-child) {
+  margin-block-start: 0;
 }
 
-#body {
-  margin-block: var(--rh-space-2xl, 32px) var(--rh-space-xl, 24px);
+#body ::slotted(:not([slot]):last-child) {
+  margin-block-end: 0;
+}
 
-  &:has(+ .empty) {
-    margin-block-end: var(--rh-space-2xl, 32px);
+@container card (min-width: 768px) {
+  #header,
+  #body,
+  #footer {
+    margin-inline: var(--rh-space-2xl, 32px);
   }
 
-  ::slotted(:not([slot]):first-child) {
-    margin-block-start: 0;
+  #header,
+  #body {
+    margin-block-start: var(--rh-space-2xl, 32px);
   }
 
-  ::slotted(:not([slot]):last-child) {
-    margin-block-end: 0;
+  #footer {
+    margin-block-end: var(--rh-space-2xl, 32px);
   }
 }
 
-#footer {
-  display: flex;
-  gap: 0.5em;
-  margin-block: auto var(--rh-space-xl, 24px);
+/* promo */
+:host([variant='promo']) {
+  display: block;
+  container-name: card promo;
+}
 
-  @container (min-width: 768px) {
-    margin-block-end: var(--rh-space-2xl, 32px);
-  }
+#container.promo {
+  --_promo-heading-font-weight:
+    var(--rh-card-heading-font-weight,
+      var(--rh-font-weight-body-text-medium, 500));
+  --_promo-heading-size: var(--rh-card-heading-font-size, var(--rh-font-size-heading-xs, 1.25rem));
+  --_promo-paragraph-font-size: var(--rh-font-size-body-text-lg, 1.125rem);
+  --_promo-paragraph-margin-block-end: var(--rh-space-lg, 16px);
+  --_promo-standard-inline-padding: var(--rh-space-2xl, 32px);
+
+  height: auto;
 }
 
-#container {
-  align-self: stretch;
+#container.promo:not(.standard, .has-image) {
+  grid-template-columns: auto;
+}
+
+.promo #body {
+  margin: var(--rh-space-2xl, 32px);
+}
+
+.promo.has-image #body {
+  order: -5;
+}
+
+.promo.has-header #header {
+  margin: 0;
+  margin-block-end: var(--rh-space-lg, 16px);
+}
+
+.promo.has-footer #footer {
+  margin-block: var(--rh-space-xl, 24px) 0;
+  margin-inline: 0;
+}
+
+.promo #header ::slotted(*) {
+  font-family: var(--rh-card-heading-font-family, var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif)) !important;
+  font-size: var(--_promo-heading-size) !important;
+  font-weight: var(--_promo-heading-font-weight) !important;
+  margin-block: 0 var(--_promo-heading-margin-block-end) !important;
+}
+
+.promo:is(.has-image, .has-header) #body ::slotted(p) {
+  font-size: var(--_promo-paragraph-font-size) !important;
+  margin-block-end: var(--_promo-paragraph-margin-block-end) !important;
+}
+
+#container.promo.standard {
   display: flex;
-  flex-direction: column;
-  justify-items: flex-start;
-  overflow: hidden;
-  border-radius: var(--_border-radius, var(--rh-border-width-lg, 3px));
-  font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif) !important;
-  line-height: var(--rh-line-height-body-text, 1.5);
-  border-style: solid;
-  border-width: var(--rh-border-width-sm, 1px);
-  border-color: var(--rh-color-border-subtle);
-  width: 100%;
-  height: 100%;
-  background-color: var(--rh-color-surface);
-  color: var(--rh-color-text-primary);
+  padding: var(--_promo-standard-inline-padding);
+  width: auto;
+}
 
-  &.on {
-    &:is(.light, .lighter, .lightest) {
-      --_header-bg: var(--rh-card-header-background-on-light, transparent);
-    }
+#container.promo.standard.dark {
+  background-color: var(--rh-color-surface-darker, #1f1f1f);
+}
 
-    &:is(.dark, .darker, .darkest) {
-      --_header-bg: var(--rh-card-header-background-on-dark, transparent);
-    }
+.promo.standard #body {
+  display: contents;
+}
 
-    &:is(.light, .palette-lightest) {
-      --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
-    }
+.promo.standard #body ::slotted(:not([slot])) {
+  font-family: var(--rh-card-heading-font-family, var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif)) !important;
+  font-size: var(--rh-font-size-body-text-xl, 1.25rem) !important;
+  font-weight: var(--rh-font-weight-body-text-medium, 500);
+  line-height: var(--rh-line-height-heading, 1.3) !important;
+}
+
+:host([variant='promo'][full-width]) #container {
+  border-color: transparent;
+  padding-block: var(--rh-space-4xl, 64px);
+  padding-inline: var(--rh-space-lg, 16px);
+  width: auto;
+}
+
+:host([variant='promo'][full-width]) #body {
+  margin: 0;
+}
 
-    &:is(.dark, .palette-darkest) {
-      --rh-color-surface: var(--rh-color-surface-darkest, #151515);
-    }
+:host([variant='promo'][full-width]) #body ::slotted(p) {
+  --_promo-paragraph-font-size: var(--rh-font-size-body-text-md, 1rem);
+}
 
-    &.palette-light {
-      --rh-color-surface: var(--rh-color-surface-light, #e0e0e0);
-    }
+:host([variant='promo'][full-width]) #header ::slotted(*) {
+  --_promo-heading-size:
+    var(--rh-card-heading-font-size,
+      var(--rh-font-size-body-text-2xl, 1.5rem));
+}
 
-    &.palette-lighter {
-      --rh-color-surface: var(--rh-color-surface-lighter, #f2f2f2);
-    }
+:host([variant='promo'][full-width]) .has-image #footer {
+  margin-block-end: var(--rh-space-2xl, 32px);
+}
 
-    &.palette-dark {
-      --rh-color-surface: var(--rh-color-surface-dark, #383838);
-    }
+@container promo (min-width: 768px) {
+  #container.promo {
+    align-items: center;
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    min-height: 250px;
+  }
 
-    &.palette-darker {
-      --rh-color-surface: var(--rh-color-surface-darker, #1f1f1f);
-    }
+  .promo #image {
+    justify-self: end;
   }
 
-  &.promo {
-    --_promo-heading-font-weight:
-      var(--rh-card-heading-font-weight,
-        var(--rh-font-weight-body-text-medium, 500));
+  .promo #body {
+    margin: var(--rh-space-3xl, 48px);
+    max-width: 70ch;
+  }
+
+  .promo #header ::slotted(*) {
+    --_promo-heading-size: var(--rh-card-heading-font-size, var(--rh-font-size-heading-sm, 1.5rem));
+  }
+
+  #container.promo.standard {
+    --_promo-standard-inline-padding: var(--rh-space-3xl, 48px);
+
+    column-gap: var(--rh-space-xl, 24px);
+    flex-direction: row;
+    justify-content: space-between;
+    min-height: auto;
+  }
+
+  .promo.standard #footer {
+    flex: 0 0 auto;
+    margin-block: 0;
+  }
+
+  :host([variant='promo'][full-width]) #container {
+    column-gap: var(--rh-space-2xl, 32px);
+    min-height: auto;
+    padding-inline: var(--rh-space-4xl, 64px);
+  }
+
+  :host([variant='promo'][full-width]) #body ::slotted(p) {
+    --_promo-paragraph-font-size: var(--rh-font-size-body-text-lg, 1.125rem);
+  }
+
+  :host([variant='promo'][full-width]) #header ::slotted(*) {
     --_promo-heading-size:
       var(--rh-card-heading-font-size,
-        var(--rh-font-size-heading-xs, 1.25rem));
-    --_promo-paragraph-font-size: var(--rh-font-size-body-text-lg, 1.125rem);
-    --_promo-paragraph-margin-block-end: var(--rh-space-lg, 16px);
-    --_promo-standard-inline-padding: var(--rh-space-2xl, 32px);
-
-    height: auto;
-
-    @container (min-width: 768px) {
-      align-items: center;
-      display: grid;
-      grid-template-columns: 2fr 1fr;
-      min-height: 250px;
-    }
-
-    &:not(.standard, .has-image) {
-      grid-template-columns: auto;
-    }
-
-    #body {
-      margin: var(--rh-space-2xl, 32px);
-
-      @container (min-width: 768px) {
-        margin: var(--rh-space-3xl, 48px);
-        max-width: 70ch;
-      }
-    }
-
-    #header {
-      & ::slotted(*) {
-        font-family: var(--rh-card-heading-font-family, var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif)) !important;
-        font-size: var(--_promo-heading-size) !important;
-        font-weight: var(--_promo-heading-font-weight) !important;
-        margin-block: 0 var(--_promo-heading-margin-block-end) !important;
-      }
-
-      @container (min-width: 768px) {
-        & ::slotted(*) {
-          --_promo-heading-size:
-            var(--rh-card-heading-font-size,
-              var(--rh-font-size-heading-sm, 1.5rem));
-        }
-      }
-    }
-
-    #image {
-      @container (min-width: 768px) {
-        justify-self: end;
-      }
-    }
-
-    &.has-image {
-      #body {
-        order: -5;
-      }
-    }
-
-    &.has-header {
-      #header {
-        margin: 0;
-        margin-block-end: var(--rh-space-lg, 16px);
-      }
-    }
-
-    &.has-footer {
-      #footer {
-        margin-block: var(--rh-space-xl, 24px) 0;
-        margin-inline: 0;
-      }
-    }
-
-    &:is(.has-image, .has-header) {
-      #body {
-        & ::slotted(p) {
-          font-size: var(--_promo-paragraph-font-size) !important;
-          margin-block-end: var(--_promo-paragraph-margin-block-end) !important;
-        }
-      }
-    }
-
-    &.standard {
-      display: flex;
-      padding: var(--_promo-standard-inline-padding);
-      width: auto;
-
-      #body {
-        display: contents;
-
-        & ::slotted(:not([slot])) {
-          font-family: var(--rh-card-heading-font-family, var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif)) !important;
-          font-size: var(--rh-font-size-body-text-xl, 1.25rem) !important;
-          font-weight: var(--rh-font-weight-body-text-medium, 500);
-          line-height: var(--rh-line-height-heading, 1.3) !important;
-        }
-      }
-
-      &.dark {
-        background-color: var(--rh-color-surface-darker, #1f1f1f);
-      }
-
-      @container (min-width: 768px) {
-        --_promo-standard-inline-padding: var(--rh-space-3xl, 48px);
-
-        column-gap: var(--rh-space-xl, 24px);
-        flex-direction: row;
-        justify-content: space-between;
-        min-height: auto;
-
-        #footer {
-          flex: 0 0 auto;
-          margin-block: 0;
-        }
-      }
-    }
-
-    &.full-width {
-      border-color: transparent;
-      padding-block: var(--rh-space-4xl, 64px);
-      padding-inline: var(--rh-space-lg, 16px);
-      width: auto;
-
-      #body {
-        margin: 0;
-
-        & ::slotted(p) {
-          --_promo-paragraph-font-size: var(--rh-font-size-body-text-md, 1rem);
-
-          @container (min-width: 768px) {
-            --_promo-paragraph-font-size: var(--rh-font-size-body-text-lg, 1.125rem);
-          }
-        }
-      }
-
-      #header {
-        & ::slotted(*) {
-          --_promo-heading-size:
-            var(--rh-card-heading-font-size,
-              var(--rh-font-size-body-text-2xl, 1.5rem));
-
-          @container (min-width: 768px) {
-            --_promo-heading-size:
-              var(--rh-card-heading-font-size,
-                var(--rh-font-size-heading-md, 1.75rem));
-          }
-        }
-      }
-
-      &.has-image {
-        #footer {
-          margin-block-end: var(--rh-space-2xl, 32px);
-
-          @container (min-width: 768px) {
-            margin-block-end: 0;
-          }
-        }
-      }
-
-      @container (min-width: 768px) {
-        column-gap: var(--rh-space-2xl, 32px);
-        min-height: auto;
-        padding-inline: var(--rh-space-4xl, 64px);
-      }
-
-      @container (min-width: 1200px) {
-        padding-inline: var(--rh-space-7xl, 128px);
-      }
-    }
+        var(--rh-font-size-heading-md, 1.75rem));
+  }
+
+  :host([variant='promo'][full-width]) .has-image #footer {
+    margin-block-end: 0;
   }
 }
+
+@container promo (min-width: 1200px) {
+  :host([variant='promo'][full-width]) #container {
+    padding-inline: var(--rh-space-7xl, 128px);
+  }
+}
\ No newline at end of file

From 5ae1893e481fd9d52b771c467fe7949cedee439c Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Mon, 16 Dec 2024 13:56:11 -0500
Subject: [PATCH 6/6] chore(card): lint

---
 elements/rh-card/rh-card.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css
index bde30d86fa..c0ee60f67c 100644
--- a/elements/rh-card/rh-card.css
+++ b/elements/rh-card/rh-card.css
@@ -327,4 +327,4 @@
   :host([variant='promo'][full-width]) #container {
     padding-inline: var(--rh-space-7xl, 128px);
   }
-}
\ No newline at end of file
+}