Fiddle with CSS/layout

src/App.vue

@@ -15,15 +15,17 @@
             </div>
           
             <div class="column-content">
-              <p class="body-text">
-                <n-card hoverable title="RPCSX is your PlayStation 4 emulator.">
+                <n-card hoverable>
                   <template #cover>
                     <img :src="getCoverURI()">
                   </template>
-                  Use only with lawfully obtained archival copies of PS4 games you physically own.
+                  <template #header>
+                    <div class="card-header">RPCSX is your PlayStation 4 emulator.</div>
+                  </template>
+                  <div class="body-text">Use only with lawfully obtained archival copies of PS4 games you physically own.</div>
                 </n-card>
 
-              </p>
+                <n-divider />
             </div>
           </div>
           <div id="right-column" class="column">
@@ -54,7 +56,7 @@
 .columns {
   display: flex;
   flex-flow: row wrap;
-  justify-content: flex-end;
+  justify-content: center;
   align-items: stretch;
 }
 

src/assets/text-styles.css

@@ -1,10 +1,23 @@
 .body-text {
     font-family: v-sans;
+    font-size: 12pt;
+}
+
+.card-header {
+    font-family: v-sans;
+    font-weight: bold;
     font-size: 14pt;
-  }
+}
+
+h2 {
+    font-family: v-sans;
+    font-size: 18pt;
+    word-wrap: break-word;
+}
   
-  h1 {
+h1 {
     font-family: v-sans;
     font-size: 30pt;
     font-weight: bold;
-  }
+    word-wrap: break-word;
+}