adding the card items width of 100% for when content dosent fill card, it will flow properly

css/styles.css

@@ -3503,7 +3503,8 @@ button {
   -ms-flex-direction: column;
   -webkit-flex-direction: column;
   flex-direction: column;
-  flex-grow: 1; }
+  flex-grow: 1;
+  width: 100%; }
   .views-row .card {
     height: 100%; }
 
@@ -3525,7 +3526,8 @@ button {
 
 .card__title {
   margin: 0.5rem 0;
-  padding: 0; }
+  padding: 0;
+  width: 100%; }
   .card__title a {
     color: #000;
     text-decoration: none; }
@@ -3559,20 +3561,22 @@ button {
   gap: 1.25rem;
   gap: inherit;
   height: 100%;
-  padding: 1rem; }
+  padding: 1rem;
+  width: 100%; }
   .card__body p:last-child {
     margin-bottom: 0; }
 
 .card__content {
   display: flex;
   flex-direction: column;
-  margin-bottom: 1.5rem; }
+  margin-bottom: 1.5rem;
+  width: 100%; }
 
 .card__media {
   margin-bottom: 1.5rem;
-  order: -1; }
+  order: -1;
+  width: 100%; }
   .card__media a {
-    background: #000;
     display: block;
     height: 100%;
     width: 100%; }
@@ -3598,9 +3602,16 @@ button {
     .card__footer > div:last-child {
       margin-bottom: 0; }
 
+.card__tags {
+  width: 100%; }
+
 .card__readmore {
   text-align: right; }
 
+.card__social {
+  max-width: 20rem;
+  width: 100%; }
+
 .card--feature .card__body {
   padding-top: 1rem; }
 

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

@@ -10,6 +10,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
 .card {
   @include uw-flex-grid(card);
   flex-grow: 1;
+  width: 100%;
   //background:$test-color-1;
   .views-row &{
     height:100%;
@@ -41,6 +42,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
 .card__title {
   margin:rem(gesso-spacing(xs)) 0;
   padding:0;
+  width: 100%;
   a {
     @include link-reverse(
         $card-link-color,
@@ -68,6 +70,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
   gap:inherit;
   height:100%;
   padding: $card-padding;
+  width: 100%;
   p:last-child {
     margin-bottom: 0;
   }
@@ -77,18 +80,19 @@ $card-padding: rem(gesso-spacing(sm)) !default;
   display:flex;
   flex-direction: column;
   margin-bottom: rem(gesso-spacing(md));
+  width: 100%;
 }
 
 .card__media {
   //background:$test-color-4;
   margin-bottom: rem(gesso-spacing(md));
   order: -1;
+  width: 100%;
   a {
-    background:#000;
+
     display: block;
     height: 100%;
     width: 100%;
-
   }
   img {
     -webkit-filter: grayscale(0);
@@ -116,13 +120,14 @@ $card-padding: rem(gesso-spacing(sm)) !default;
   }
 }
 .card__tags{
-
+  width: 100%;
 }
 .card__readmore {
   text-align: right;
 }
 .card__social{
-
+  max-width:20rem;
+  width: 100%;
 }