TCI-1129: preserve content padding when no top/left image (#870)

source/_patterns/02-molecules/card/_card.scss

@@ -179,7 +179,7 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
   .usa-card--media-top &,
   .usa-card--media-left & {
     .usa-card__content {
-      @include u-padding(4);
+      @include u-padding(4, !important);
     }
 
     .usa-card__media {
@@ -213,10 +213,10 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
     }
 
     .usa-card__media {
-      @include u-maxw(full);
+      @include u-width(full);
 
       @include at-media(desktop) {
-        @include u-maxw(mobile-lg);
+        min-width: 30rem;
       }
 
       .jcc-card--overlay-color-none {

source/_patterns/02-molecules/card/card~media-left.yml

@@ -3,7 +3,7 @@ card:
   title: "Posuere et ornare"
   body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
   media:
-    src: "https://newsroom.courts.ca.gov/sites/default/files/newsroom/2020-08/supreme%20court%20mural%20%28SF%29.jpg"
+    src: "https://source.unsplash.com/random/350x250"
     alt: "Image media test"
   link:
     url: "#"

source/_patterns/02-molecules/card/card~media-top.yml

@@ -4,7 +4,7 @@ card:
   brow: "Pellentesque tempo"
   body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
   media:
-    src: "https://newsroom.courts.ca.gov/sites/default/files/newsroom/2020-08/supreme%20court%20mural%20%28SF%29.jpg"
+    src: "https://source.unsplash.com/random/350x250"
     alt: "green"
   link:
     url: "#"

source/_patterns/03-organisms/cards/cards~media-left-icon.yml

@@ -0,0 +1,34 @@
+cards:
+  heading:
+    title: "Cards"
+    lead: "<p>Ipsum velit bibendum class id sit justo, at fermentum suscipit rhoncus hac sociis blandit, ante tincidunt imperdiet himenaeos felis. Sagittis diam dignissim risus mattis ad donec urna, non ligula dui viverra rhoncus convallis netus vivamus, platea iaculis consectetur pellentesque litora dolor.</p>"
+  num_cols: 1
+  items:
+    - style: "media-left"
+      title: "Posuere et ornare"
+      body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
+      media: "<svg class='icon icon-laptop margin-4 margin-right-0' width='35' height='35' role='img' aria-label='Laptop'><use xlink:href='#icon-fa-laptop'></use></svg>"
+      link:
+        url: "#"
+        text: "Luctus nunc quam"
+    - style: "media-left"
+      title: "Posuere et ornare"
+      body: "<p>Habitasse nec dui adipiscing massa magna mollis morbi netus malesuada, odio varius id eu integer felis tellus at feugiat, euismod potenti inceptos nibh mauris posuere scelerisque facilisi. This card has no link url.</p>"
+      media: "<svg class='icon icon-landmark margin-4 margin-right-0' width='35' height='35' role='img' aria-label='Landmark'><use xlink:href='#icon-fa-landmark'></use></svg>"
+      link:
+        url: null
+        text: "Erat neque quisque vivamus"
+    - style: "media-left"
+      title: "Posuere et ornare"
+      body: "<p>In torquent consequat quam vulputate himenaeos semper ut aliquam at, iaculis ac platea laoreet ridiculus mattis sagittis volutpat hendrerit, vehicula orci dictum dictumst nunc scelerisque lacus auctor.</p>"
+      media: "<svg class='icon icon-comment-alt margin-4 margin-right-0' width='35' height='35' role='img' aria-label='Comment'><use xlink:href='#icon-fa-comment-alt'></use></svg>"
+      link:
+        url: "#"
+        text: "Aliquet potenti"
+    - style: "media-left"
+      title: "Posuere et ornare"
+      body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
+      media: "<svg class='icon icon-money-bill-wave margin-4 margin-right-0' width='35' height='35' role='img' aria-label='Money bill'><use xlink:href='#icon-fa-money-bill-wave'></use></svg>"
+      link:
+        url: "#"
+        text: "Luctus nunc quam"

source/_patterns/03-organisms/cards/cards~media-left.yml

@@ -7,28 +7,28 @@ cards:
     - style: "media-left"
       title: "Posuere et ornare"
       body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
-      media: "<svg class='icon icon-laptop margin-4 margin-right-0' width='35' height='35' role='img' aria-label='Laptop'><use xlink:href='#icon-fa-laptop'></use></svg>"
+      media: "<img src='https://source.unsplash.com/random/350x250'>"
       link:
         url: "#"
         text: "Luctus nunc quam"
     - style: "media-left"
       title: "Posuere et ornare"
       body: "<p>Habitasse nec dui adipiscing massa magna mollis morbi netus malesuada, odio varius id eu integer felis tellus at feugiat, euismod potenti inceptos nibh mauris posuere scelerisque facilisi. This card has no link url.</p>"
-      media: "<svg class='icon icon-landmark margin-4 margin-right-0' width='35' height='35' role='img' aria-label='Landmark'><use xlink:href='#icon-fa-landmark'></use></svg>"
+#      media: "<img src='https://source.unsplash.com/random/350x250'>"
       link:
         url: null
         text: "Erat neque quisque vivamus"
     - style: "media-left"
       title: "Posuere et ornare"
       body: "<p>In torquent consequat quam vulputate himenaeos semper ut aliquam at, iaculis ac platea laoreet ridiculus mattis sagittis volutpat hendrerit, vehicula orci dictum dictumst nunc scelerisque lacus auctor.</p>"
-      media: "<svg class='icon icon-comment-alt margin-4 margin-right-0' width='35' height='35' role='img' aria-label='Comment'><use xlink:href='#icon-fa-comment-alt'></use></svg>"
+      media: "<img src='https://source.unsplash.com/random/350x250'>"
       link:
         url: "#"
         text: "Aliquet potenti"
     - style: "media-left"
       title: "Posuere et ornare"
       body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
-      media: "<svg class='icon icon-money-bill-wave margin-4 margin-right-0' width='35' height='35' role='img' aria-label='Money bill'><use xlink:href='#icon-fa-money-bill-wave'></use></svg>"
+      media: "<img src='https://source.unsplash.com/random/350x250'>"
       link:
         url: "#"
         text: "Luctus nunc quam"