ISTWCMS-5880: rebase continue

src/patterns/03-layouts/layout/_layout.scss

@@ -2,22 +2,25 @@
 
 .layout {
   @include uw-contained-width;
-
-  .uw-node__with-image .card__node & {
-    padding: var(--size-1);
+  .uw-node__with-media .card__node & {
+    padding: var(--size-2);
     @media(min-width: $screen-xxl) {
-      padding: var(--size-1) 0;
+      padding: var(--size-2) 0;
     }
   }
-
+  &.card__media{
+    padding: 0 var(--size-2);
+  }
   &.uw-contained-width {
     @include uw-contained-width;
-    padding: var(--size-1);
+    padding: var(--size-2);
 
     @media(min-width: $screen-xxl) {
-      padding: var(--size-1) 0;
+      padding: var(--size-2) 0;
+    }
+    &.card__media{
+      padding: 0 var(--size-2);
     }
-
     &--narrow {
       /* Match the width of WCMS2's narrow: 496px */
       max-width: 31rem;
@@ -102,6 +105,9 @@
         }
       }
     }
+    &.card__media{
+      padding: 0;
+    }
   }
   // When wrapped with class to identify sidebar
   .uw-node__with-sidebar & {

src/patterns/04-components/card/_card.scss

@@ -136,17 +136,7 @@ $card-padding: var(--size-2) !default;
 }
 
 .card__media{
-  .card__header{
-    margin: 0 auto;
-    max-width: var(--layout-max-width);
-    padding: 0 var(--size-1);
-    @media(min-width: $screen-xxl) {
-      padding: 0;
-    }
-    .card__title{
-      margin: var(--size-1) 0;
-    }
-  }
+//
 }
 
 // body

src/patterns/04-components/card/card--node/_card--node.scss

@@ -12,7 +12,11 @@
     margin: 0 auto;
     max-width: var(--layout-max-width);
   }
-
+  .uw-node__with-media &{
+    > .card__header{
+      padding: var(--size-2);
+    }
+  }
   .uw-node__without-media & {
     .card__header,
     .card__footer {
@@ -79,7 +83,7 @@
   }
   // CSS for specific node card presentations:
   &--contact {
-    background: $test-color-2;
+    background: $test-color-9;
     display: grid;
     gap: var(--grid-gap);
 
@@ -92,28 +96,29 @@
     @media(min-width: $screen-md) {
       display: grid;
       gap: var(--size-4);
-      grid-template-columns: var(--size-20) 1fr;
+      //grid-template-columns: var(--size-20) 1fr;
     }
 
     .card__image {
-      grid-column: 1 / 3;
-
+      //grid-column: 1 / 3;
+      background: $test-color-3;
       @media(min-width: $screen-md) {
-        grid-column: 1 / 2;
+        //grid-column: 1 / 2;
       }
     }
 
     .card__header,
     .card__body,
     .card__footer {
-      grid-column: 1 / 3;
+      //grid-column: 1 / 3;
       @media(min-width: $screen-md) {
-        grid-column: 2 / 3;
+        //grid-column: 2 / 3;
       }
       padding: 0;
     }
 
     .uw-node__without-media & {
+      background: $test-color-9;
       @media(min-width: $screen-md) {
         grid-template-columns: 100%;
       }
@@ -121,7 +126,7 @@
       .card__header,
       .card__body,
       .card__footer {
-        grid-column: 1 / 2;
+        //grid-column: 1 / 2;
       }
     }
   }
@@ -137,7 +142,25 @@
     }
 
     .uw-node__with-media & {
+      .card__header{
+        display: grid;
+        padding: var(--size-2);
+        .card__title{
+          margin: 0;
+          padding: var(--size-2) 0;
+        }
 
+      }
+      .card__media{
+        //
+      }
+      .card__footer,
+      .card__tags {
+
+        // Width is experimental to match one of the max-widths in
+        // layouts for narrower width page look.
+        @include uw-contained-width(var(--layout-wide-max-width));
+      }
       .card__featured-image {
         align-items: center;
         background-position: center center;
@@ -156,7 +179,7 @@
           align-self: end;
           margin-bottom: 0;
           margin-top: 0;
-
+          padding: inherit;
           .card__date {
             margin-bottom: 0;
             margin-top: 0;
@@ -186,14 +209,6 @@
           }
         }
       }
-
-      .card__footer,
-      .card__tags {
-
-        // Width is experimental to match one of the max-widths in
-        // layouts for narrower width page look.
-        @include uw-contained-width(var(--layout-wide-max-width));
-      }
     }
     // CSS for displaying the title within the node :
   }

src/patterns/04-components/card/card--teaser/_card--teaser.scss

@@ -18,7 +18,7 @@
     max-width: 90%;
   }
 
-  .uw-node__without-image & {
+  .uw-node__without-media & {
     .card__header,
     .card__footer {
       padding: 0;