Add crude song API integration

components/ArtistListItem.vue

@@ -1,19 +1,21 @@
 <script setup lang="ts">
 const { runningOrder, country, artist, title, flag, artistID } = defineProps(['runningOrder', 'country', 'artist', 'title', 'flag', 'artistID'])
+const config = useRuntimeConfig()
+const apiBase = config.public.apiBase
 </script>
 
 <template>
     <NuxtLink :to="`/review/${artistID}`">
     <div class="flex gap-4 border border-slate-200 justify-between overflow-clip items-center rounded-2xl ArtistCard">
-        <h2 class="w-1/4 text-center text-slate-300 text-6xl">{{ runningOrder }}</h2>
+        <h2 class="w-1/4 text-center text-slate-300 text-3xl md:text-6xl">{{ runningOrder }}</h2>
         <div class="flex flex-col w-1/2">
             <h2>{{ country }}</h2>
-            <p class="flex md:gap-2 text-sm flex-col md:flex-row">
-                <span class="font-bold">{{ artist }}</span>
+            <p class="flex md:gap-2 text-xs md:text-lg flex-col md:flex-row">
+                <span class="font-semibold">{{ artist }}</span>
                 <span class="italic">{{ title }}</span>
             </p>
         </div>
-        <img class="w-1/4" src="https://placehold.co/100" alt="{{ flag }}">
+        <img :src="`${apiBase}/static/flags/${flag.toLowerCase()}.webp`" class="w-1/4" />
     </div>
     </NuxtLink>
 </template>