ADD: Better Network view

components/Person/Person.css

@@ -1,13 +1,17 @@
 .Person {
-    flex: 1 1;
-    flex-basis: 300px;
+    flex-basis: clamp(350px, calc(33% - 3rem), 500px);
+    flex-grow: 1;
+    flex-shrink: 0;
     align-items: center;
+    justify-content: stretch;
     gap: 1rem;
 
     & img {
         border: 4px solid var(--color-orange);
         border-radius: 50%;
         width: 150px;
+        height: 150px;
+        object-fit: cover;
     }
 
     & span {
@@ -27,5 +31,11 @@
             margin-top: -1rem;
         }
     }
+
+    & .flavour {}
+
+    & .button {
+        margin-top: auto;
+    }
 }
 

components/Person/Person.vue

@@ -7,8 +7,8 @@
     <p>
       <span v-for="tag in tags">{{tag}}</span>
     </p>
-    <p>{{flavour}}</p>
-    <Button :href="link" target="_blank" rel="noreferrer noopener" label="Zur Homepage" :aria-label="`Externer Link zur Homepage von ${name}`" />
+    <p class="flavour">{{flavour}}</p>
+    <Button :href="link" class="button" target="_blank" rel="noreferrer noopener" label="Zur Homepage" :aria-label="`Externer Link zur Homepage von ${name}`" />
   </article>
 </template>