diff --git a/css/styles.css b/css/styles.css
index 87ed6ef30fd64c0323541b4c23f6af25526e0aa9..11995a63ec2779babb66b498be38ec4228d549f5 100644
--- a/css/styles.css
+++ b/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; } }
 
diff --git a/source/_patterns/04-components/card/_card.scss b/source/_patterns/04-components/card/_card.scss
index 0d511854a01390f0656f1bef5395ccc4e733b0f8..0ced2d10ff404af6e10b0e8e37346d61f4f48605 100644
--- a/source/_patterns/04-components/card/_card.scss
+++ b/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;
diff --git a/source/_patterns/04-components/card/card--feature/card--feature.md b/source/_patterns/04-components/card/card--feature/card--feature.md
index 53f2f3b168f45ff6068041a679e92de9c1928518..7ff3315611558c4626459148cc37bf88254beeb7 100644
--- a/source/_patterns/04-components/card/card--feature/card--feature.md
+++ b/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.
diff --git a/source/_patterns/04-components/card/card.md b/source/_patterns/04-components/card/card.md
index 3165f27718ab170f53c5f89202f718226e22d8ba..94716b10d9d8663eabe0c264448ce0bfd70f2c1a 100644
--- a/source/_patterns/04-components/card/card.md
+++ b/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