feat: implement custom project data image

apps/client/src/views/project-info/ProjectInfo.scss

@@ -15,7 +15,6 @@
 
   display: flex;
   flex-direction: column;
-  align-items: center;
 
   .logo {
     max-width: min(200px, 30vw);
@@ -24,8 +23,13 @@
   .info {
     flex: 1;
     max-height: 100%;
+    margin-inline: auto;
     overflow-y: auto;
     width: min(calc(100vw - 4rem), 960px);
+    display: flex;
+    flex-direction: column;  
+    align-items: start;
+    gap: $view-element-gap;
 
     padding-bottom: 10vh;
   }
@@ -34,19 +38,37 @@
     font-weight: 600;
     color: var(--label-color-override, $viewer-label-color);
     text-transform: uppercase;
-    margin-top: $view-element-gap;
   }
 
   .info__value {
     white-space: break-spaces;
   }
 
+  .info__custom {
+    display: flex;
+    gap: 1rem;
+  }
+
+  .info__image-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 192px;
+    height: 192px;
+  }
+
+  .info__image {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+
   .link.info__value {
     display: flex;
-    gap: 0.5rem;
+    gap: $view-element-gap;
     align-items: center;
     color: $action-text-color;
-  
+
     &:hover {
       color: $ontime-color;
     }
@@ -59,5 +81,9 @@
     .logo img {
       height: min(50px, 10vh);
     }
+    .info__image-container {
+      width: 96px;
+      height: 96px;
+    }
   }
 }