@everymatrix/casino-search 1.12.7 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-search",
-  "version": "1.12.7",
+  "version": "1.13.0",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7f8097b50f6a8794ce81f8961ed3efba1842a578"
+  "gitHead": "1e1112223dbbcaa114d0dc15006eb09f2beabedd"
 }

package/src/CasinoSearch.svelte

@@ -408,16 +408,12 @@
   </div>
 
 <style lang="scss">
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
   $color-grey: #717171;
   $color-light-grey: #cacaca;
   $color-black: #212121;
 
-  $grid-gap: 8px;
-  $grid-cell-size: 167px;
+  $grid-gap: 16px;
+  $grid-cell-size: 192px;
   $grid-cell-size-small: 110px;
   $grid-cell-size-medium: 122px;
 
@@ -429,6 +425,10 @@
     box-sizing: border-box;
   }
 
+  :host {
+    font-family: inherit;
+  }
+
   .CasinoSearch {
     margin: 30px 16px;
   }
@@ -502,12 +502,39 @@
 
     &ResultsContainer {
       display: grid;
-      gap: $grid-gap;
+      gap: $grid-gap + 12;
       grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size, 46%), 1fr));
       grid-template-rows: repeat(auto-fill, $grid-cell-size);
       grid-auto-rows: $grid-cell-size;
       grid-auto-columns: $grid-cell-size;
       grid-auto-flow: row dense;
+
+      @media screen and (max-width: 480px) {
+        display: grid;
+        gap: $grid-gap;
+        grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size-medium, 46%), 1fr));
+        grid-template-rows: repeat(auto-fill, $grid-cell-size-medium);
+        grid-auto-rows: $grid-cell-size-medium;
+        grid-auto-columns: $grid-cell-size-medium;
+      }
+      
+      @media screen and (max-width: 385px) {
+        display: grid;
+        gap: $grid-gap;
+        grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size-small, 46%), 1fr));
+        grid-template-rows: repeat(auto-fill, $grid-cell-size-small);
+        grid-auto-rows: $grid-cell-size-small;
+        grid-auto-columns: $grid-cell-size-small;
+      }
+      
+      @media screen and (min-width: 1100px) {
+        grid-template-rows: repeat(auto-fill, 142px);
+        grid-auto-rows: 142px;
+      }
+
+      @media screen and (max-width: 1300px) {
+      padding: 0 2.4%
+    }
     }
   }
 
@@ -535,7 +562,7 @@
     }
 
     &.CasinoSearch {
-      margin: 30px 16px;
+      margin: 30px auto;
     }
 
     .Search {