enforce min size for image, break/wrap text for names & titles

Author: matthewcsimpson

src/lib/Card/Card.scss

@@ -6,11 +6,11 @@
   background: $color__n-85;
   border-radius: $border-radius__m;
   width: 100%;
-  
+
   &--transparent {
     background: transparent;
   }
-  
+
   &--outlined {
     border: 1px solid $color__n-60;
   }
@@ -37,7 +37,7 @@
       order: 2;
     }
   }
-  
+
   &__main {
     display: flex;
     flex-direction: row;
@@ -49,6 +49,8 @@
   &__image {
     height: 5.625rem;
     width: 5.625rem;
+    min-height: 5.625rem;
+    min-width: 5.625rem;
     border-radius: 50%;
     overflow: hidden;
     display: flex;
@@ -66,11 +68,15 @@
     &--l {
       height: 9rem;
       width: 9rem;
+      min-height: 9rem;
+      min-width: 9rem;
     }
 
     &--s {
       height: 4rem;
       width: 4rem;
+      min-height: 4rem;
+      min-width: 4rem;
     }
 
     &--radius-l {
@@ -106,12 +112,13 @@
     margin: 0 $spacing__m;
     flex-grow: 1;
     order: 2;
+    word-break: break-all;
   }
 
   &__cta {
     order: 3;
   }
-  
+
   &__footer {
     color: $color__n-10;
     border-top: 1px solid $color__n-60;
@@ -120,10 +127,10 @@
     justify-content: space-between;
     padding: 0;
   }
-  
+
   &__footer-link-wrapper {
     padding: 0;
-    
+
     a {
       color: $color__n-10;
       border-left: 1px solid $color__n-60;
@@ -136,10 +143,10 @@
       }
     }
   }
-  
+
   &__footer-details {
     padding: $spacing__s $spacing__m;
     margin: 0;
     justify-self: flex-start;
   }
-}
+}