additional info on card markup file and css for card base padding

css/styles.css

@@ -2076,7 +2076,7 @@ ul.toolbar-menu {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  padding: 0 1.5rem 0; }
+  padding: 1rem; }
   .card__body p:last-child {
     margin-bottom: 0; }
 
@@ -2098,7 +2098,7 @@ ul.toolbar-menu {
 
 .card__footer {
   margin-top: auto;
-  padding: 0 0 1.5rem; }
+  padding: 0 0 1rem; }
   .card__footer > div {
     margin-bottom: 1rem; }
     .card__footer > div:last-child {
@@ -2108,7 +2108,7 @@ ul.toolbar-menu {
   text-align: right; }
 
 .card--feature .card__body {
-  padding-top: 1.5rem; }
+  padding-top: 1rem; }
 
 .card--feature .card__media {
   flex-grow: 1;
@@ -2119,7 +2119,7 @@ ul.toolbar-menu {
     flex-direction: row; }
     .card--feature .card__body {
       max-width: 600px;
-      padding: 1.5rem 2vw 0; }
+      padding: 1rem 2vw 0; }
     .card--feature .card__media {
       order: initial; } }
 

source/_patterns/04-components/card/_card.scss

@@ -5,7 +5,7 @@ $card-accent-border-color: gesso-color(ui, generic, accent) !default;
 $card-link-color: gesso-color(text, on-light) !default;
 $card-link-color-hover: gesso-color(ui, generic, text-dark) !default;
 $card-meta-color: gesso-color(ui, generic, text-dark) !default;
-$card-padding: rem(gesso-spacing(md)) !default;
+$card-padding: rem(gesso-spacing(sm)) !default;
 
 .card {
   display: flex;
@@ -51,7 +51,7 @@ $card-padding: rem(gesso-spacing(md)) !default;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  padding: 0 $card-padding 0;
+  padding: $card-padding;
 
   p:last-child {
     margin-bottom: 0;

source/_patterns/04-components/card/card--feature/card--feature.md

@@ -5,10 +5,12 @@ title: Feature Card
 
 __Variables:__
 * modifier_classes: [string] Classes to modify the default component styling.
-* title: [string] Title of the card.
+* title: [string] Title of the featured card.
 * url: [string] URL of the card.
 * date: [string] Date of the card.
 * read_more: [boolean] Whether to show the read more link.
 * footer: [string] Footer content of the card.
-* media: [string] URL for the background-image.
+* sources: [string] URL for the srcset of picture tag inside of responsive-image.
+* img_element: [string] Url for the fallback image.
+* alt: [string] Alt text to the image used in the picture tag or fallback image.
 * content: [string] Content of the card.

source/_patterns/04-components/card/card.md

@@ -14,7 +14,9 @@ __Variables:__
 * date: [string] Date of the card.
 * read_more: [boolean] Whether to show the read more link.
 * footer: [string] Footer content of the card.
-* media: [string] URL for the image.
+* sources: [string] URL for the srcset of picture tag inside of responsive-image.
+* img_element: [string] Url for the fallback image.
+* alt: [string] Alt text to the image used in the picture tag or fallback image.
 * content: [string] Content of the card.
 * social_media: [array] Social media icons that can be included to card
     * text