UI changes (now responsive) && fixed YT recommendations method

src/routes/(app)/+page.svelte

@@ -1,15 +1,68 @@
 <script lang="ts">
-    import ScrollableCardMenu from '$lib/components/media/scrollableCardMenu.svelte'
     import type { PageData } from './$types'
     import Loader from '$lib/components/util/loader.svelte'
+    import MediaCard from '$lib/components/media/mediaCard.svelte'
+    import AlbumCard from '$lib/components/media/albumCard.svelte'
 
     export let data: PageData
 </script>
 
-<div id="main">
+<div id="main" class="grid">
     {#await data.recommendations}
         <Loader />
     {:then recommendations}
-        <ScrollableCardMenu header={'Listen Again'} cardDataList={recommendations} />
+        <div id="card-wrapper" class="grid w-full gap-4 justify-self-center px-[5%] pt-8">
+            {#each recommendations.filter((item) => item.type === 'album') as album}
+                <AlbumCard {album} />
+            {/each}
+        </div>
     {/await}
 </div>
+
+<style>
+    @media (min-width: 350px) {
+        #card-wrapper {
+            grid-template-columns: repeat(2, 1fr);
+        }
+    }
+    @media (min-width: 550px) {
+        #card-wrapper {
+            grid-template-columns: repeat(3, 1fr);
+        }
+    }
+    @media (min-width: 750px) {
+        #card-wrapper {
+            grid-template-columns: repeat(4, 1fr);
+        }
+    }
+    @media (min-width: 950px) {
+        #card-wrapper {
+            grid-template-columns: repeat(5, 1fr);
+        }
+    }
+    @media (min-width: 1150px) {
+        #card-wrapper {
+            grid-template-columns: repeat(6, 1fr);
+        }
+    }
+    @media (min-width: 1350px) {
+        #card-wrapper {
+            grid-template-columns: repeat(7, 1fr);
+        }
+    }
+    @media (min-width: 1550px) {
+        #card-wrapper {
+            grid-template-columns: repeat(8, 1fr);
+        }
+    }
+    @media (min-width: 2200px) {
+        #card-wrapper {
+            grid-template-columns: repeat(9, 1fr);
+        }
+    }
+    @media (min-width: 3000px) {
+        #card-wrapper {
+            grid-template-columns: repeat(10, 1fr);
+        }
+    }
+</style>