Fixes all lowercase issue (#3302)

UI/Web/src/app/cards/person-card/person-card.component.scss

@@ -1,4 +1,3 @@
-
 $image-height: 160px;
 @use '../../../card-item-common';
 
@@ -11,21 +10,46 @@ $image-height: 160px;
 }
 
 .card-item-container {
+  background-color: unset;
+  border: 1px solid transparent;
+  transition: all ease-in-out 300ms;
+
   .overlay {
     height: $image-height;
-
+    position: relative;
+    display: flex;
+    background-color: hsl(0deg 0% 0% / 12%);
     /* TODO: Robbie fix this hack */
     .missing-img {
-      position: absolute;
-      left: 43%;
-      top: 25%;
+      align-self: center;
+      display: flex;
+    }
+
+    .card-overlay {
+      height: 100%;
     }
   }
-  .card-overlay {
-    height: $image-height;
-  }
+
   .card-body {
     bottom: 0;
+    background-color: transparent;
+    position: unset !important;
+    margin-bottom: 5px;
+    display: flex;
+    flex-direction: column;
+
+    .card-title {
+      margin: 0 auto;
+    }
+  }
+
+  &:hover {
+    cursor: pointer;
+
+    .overlay {
+      .missing-img {
+      }
+    }
   }
 }