ISTWCMS-5898: continue rebase

src/patterns/03-layouts/site-container/_site-container.scss

@@ -14,6 +14,11 @@
     z-index: var(--layer-header);
   }
   .uw-highlighted {
+    @include uw-contained-width(var(--layout-max-width-narrow));
+    @media(min-width: $screen-xl) {
+      // Reset the width so we use all the width when we have room to.
+      @include uw-contained-width(var(--layout-max-width));
+    }
     grid-column: 1 / 2;
     grid-row: 2 / 3;
     position: relative;

src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss

@@ -20,6 +20,9 @@
     padding: var(--size-2);
   }
 }
+.uw-highlighted{
+  padding: 0;
+}
 .node-form,
 .admin-list,
 .js-media-library-view,

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

@@ -95,32 +95,46 @@
   }
   // CSS for specific node card presentations:
   &--contact {
-    @include uw-contained-width();
+    @include uw-contained-width(var(--layout-max-width-narrow));
+    @media(min-width: $screen-xl) {
+      // Reset the width so we use all the width when we have room to.
+      @include uw-contained-width(var(--layout-max-width));
+    }
     display: block;
     @media(min-width: $screen-md) {
       display: grid;
       grid-template-columns: 100%;
     }
     .card__media{
-      @include uw-full-width-margin;
       grid-column: 1 / 3;
       grid-row: 1 / 2;
       margin-bottom: var(--size-2);
       @media(min-width: $screen-md) {
         margin-bottom: 0;
+        margin-left: 0;
+        margin-right: 0;
+      }
+      &.uw-full-width{
+        @include uw-full-width-margin;
       }
       &.uw-contained-width{
+        margin-left: 0;
+        margin-right: 0;
         .card__node--uw_ct_contact{
           @include uw-contained-width;
         }
       }
       &.uw-contained-width--wide{
+        margin-left: 0;
+        margin-right: 0;
         .card__node--uw_ct_contact{
           @include uw-contained-width;
           max-width: 47.0625rem;
         }
       }
       &.uw-contained-width--narrow{
+        margin-left: 0;
+        margin-right: 0;
         .card__node--uw_ct_contact{
           @include uw-contained-width;
           max-width: 31rem;

src/patterns/04-components/contact/_contact.scss

@@ -103,6 +103,10 @@ $details-background-color: var(--gray-2) !default;
 .node {
   // &--type-uw-ct-profile
   &--type-uw-ct-contact{
-    @include uw-contained-width();
+    @include uw-contained-width(var(--layout-max-width-narrow));
+    @media(min-width: $screen-xl) {
+      // Reset the width so we use all the width when we have room to.
+      @include uw-contained-width(var(--layout-max-width));
+    }
   }
 }

src/patterns/04-components/view/_view.scss

@@ -10,7 +10,11 @@ $sidebar-width: 18.75rem;
 // to match flexbox in multi list usage.
 .view {
   &s-element-container{
-    @include uw-contained-width;
+    @include uw-contained-width(var(--layout-max-width-narrow));
+    @media(min-width: $screen-xl) {
+      // Reset the width so we use all the width when we have room to.
+      @include uw-contained-width(var(--layout-max-width));
+    }
     padding: 0;
     position: relative;
     width: 100%;
@@ -34,7 +38,11 @@ $sidebar-width: 18.75rem;
     padding-right: 0;
   }
   &-interact{
-    @include uw-contained-width;
+    @include uw-contained-width(var(--layout-max-width-narrow));
+    @media(min-width: $screen-xl) {
+      // Reset the width so we use all the width when we have room to.
+      @include uw-contained-width(var(--layout-max-width));
+    }
     display: flex;
     gap: var(--size-1);
     grid-row-gap: 0;