ADD: Responsiveness

components/Services/Services.css

@@ -11,7 +11,7 @@
         & article {
             flex-grow: 1;
             flex-shrink: 0;
-            flex-basis: clamp(400px, calc(33% - 3rem), 500px);
+            flex-basis: clamp(350px, calc(33% - 3rem), 500px);
             position: relative;
 
             & .chip {
@@ -43,33 +43,24 @@
 
     .network-list {
         display: flex;
+        flex-wrap: wrap;
+    }
+}
 
-        & article {
-            width: clamp(400px, calc(33% - 3rem), 500px);
-            align-items: center;
-            gap: 1rem;
+@media (width < 600px) {
+    .Services {
+        & .service-list {
+            width: 80vw;
 
-            & img {
-                border: 4px solid var(--color-orange);
-                border-radius: 50%;
-                width: 150px;
+            & article {
+                flex-basis: 100%;
             }
+        }
 
-            & main {
-                margin-top: -1rem;
-            }
-
-            & span {
-                font-family: 'Roboto Condensed', sans-serif;
-                font-weight: bold;
-
-                &:not(:last-child):after {
-                    content: " | "
-                }
-            }
-
-            & p {
-                text-align: center;
+        & .network-list {
+            --height: 380px;
+            & article {
+                flex-basis: 80vw;
             }
         }
     }