FIX: mpa, nuxt4 future, improvements in intro and services

Added mpa support, nuxt4 future compatibility, improvements in intro and services

app/assets/css/services.css

@@ -0,0 +1,72 @@
+.Services {
+    background-image: radial-gradient(circle at 100vw 100vh, rgba(255,145,0,0.2) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0) 100%);
+    background-color: var(--color-orange-black);
+    background-repeat: no-repeat;
+
+    .service-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        grid-template-rows: repeat(4, auto);
+
+        & article {
+            grid-row: span 4;
+            display: grid;
+            grid-template-rows: subgrid;
+            position: relative;
+
+            & .chip {
+                position: absolute;
+                right: -1rem;
+                top: calc(-1rem - 3px);
+            }
+
+            & header {
+                display: flex;
+            }
+
+            & ul {
+                gap: 1rem;
+
+                & li {
+                    display: flex;
+                    align-items: center;
+                    gap: 1rem;
+                }
+            }
+
+            & .extra {
+                margin-top: auto;
+            }
+        }
+    }
+
+    .network-list {
+        width: 100%;
+        overflow-x: auto;
+        padding-top: 4px;
+
+        & .scroll-container {
+            display: flex;
+            padding-bottom: 3rem;
+        }
+    }
+}
+
+@media (width < 1423px) {
+    .Services {
+        & .service-list article:last-child {
+            grid-column: 1/-1;
+        }
+    }
+}
+
+@media (width < 600px) {
+    .Services {
+        & .network-list {
+            --height: 380px;
+            & article {
+                flex-basis: 70vw;
+            }
+        }
+    }
+}