📱 Implement responsive design

index.html

@@ -19,6 +19,8 @@
                 --size-big: 2rem;
                 --size-normal: 1.3rem;
                 --size-small: 1rem;
+
+                --column-count: 4;
             }
 
             @font-face {
@@ -83,7 +85,7 @@
             }
             .app__main__gitmojis {
                 display: grid;
-                grid-template-columns: repeat(4, minmax(0, 1fr));
+                grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
             }
             .app__main__gitmojis__item {
                 margin: var(--size-normal);
@@ -168,6 +170,65 @@
                 border-radius: 50%;
                 cursor: pointer;
             }
+            @media (max-width: 1900px) {
+                :root {
+                    --size-biggest: 5rem;
+                    --size-normal: 1rem;
+                }
+            }
+            @media (max-width: 1400px) {
+                .app__main {
+                    padding: 0 6.25vw;
+                }
+            }
+            @media (max-width: 1200px) {
+                :root {
+                    --size-biggest: 4rem;
+                    --size-small: 0.75rem;
+                }
+                .app__main {
+                    padding: 0 var(--size-normal);
+                }
+            }
+            @media (max-width: 1100px) {
+                :root {
+                    --column-count: 3;
+                }
+            }
+            @media (max-width: 900px) {
+                :root {
+                    --size-normal: 1.3rem;
+                    --size-small: 1rem;
+
+                    --column-count: 2;
+                }
+            }
+            @media (max-width: 750px) {
+                :root {
+                    --size-normal: 1rem;
+                    --size-small: 0.75rem;
+                }
+            }
+            @media (max-width: 550px) {
+                :root {
+                    --size-normal: 0.75rem;
+                    --size-small: 0.5rem;
+                }
+            }
+            @media (max-width: 450px) {
+                :root {
+                    --size-normal: 1rem;
+                    --size-small: 0.75rem;
+
+                    --column-count: 1;
+                }
+            }
+            @media (max-width: 300px) {
+                :root {
+                    --size-normal: 0.75rem;
+                    --size-small: 0.5rem;
+                }
+            }
         </style>
         <script>module = {}</script>
         <script defer src="https://unpkg.com/fast-dice-coefficient@1.0.3/dice.js"></script>