Better (responsive) champion selector

frontend/components/ChampionSelector.vue

@@ -25,7 +25,7 @@ async function submit() {
     <div style="width: fit-content; margin: auto;">
         <input @keyup.enter="submit" v-model="searchText" ref="searchBar" class="search-bar" type="text" placeholder="Search a champion"/>
     </div>
-    <div class="champion-container" style="margin-top: 20px; margin-bottom: 20px;">
+    <div class="champion-container">
         <NuxtLink v-for="champion in filteredChampions" :to="'/champion/' + champion.alias.toLowerCase()">
         <div class="champion-img-container">
         <NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
@@ -53,19 +53,22 @@ async function submit() {
     outline: none;
 }
 .champion-container {
-    width: 1390px;
+    width: 90%;
     height: auto;
 
     display: grid;
-    grid-template-columns: repeat(10, 1fr);
+    grid-template-columns: repeat(auto-fit, 128px);
     grid-gap: 10px;
+    justify-content: center;
 
-    overflow-x: hidden;
+    /* overflow-x: hidden;
     overflow-y: scroll;
     scrollbar-color: var(--color-on-surface) var(--color-surface-darker);
-    scrollbar-width: thin;
+    scrollbar-width: thin; */
 
     margin: auto;
+    margin-top: 20px;
+    margin-bottom: 20px;
 }
 .champion-img-container {
     overflow: hidden; width: 120px; height: 120px;