Refactor CSS styles for improved layout and responsiveness

- Removed container-type from .road-container
- Fixed dimensions for .road-car and .step-icon to fixed sizes
- Adjusted positioning and dimensions for step labels
- Updated padding and flex properties in .side-panel for better alignment
- Refined font size variables for improved scaling on smaller screens

skiply/skiply.css

@@ -246,7 +246,6 @@ body {
 .road-container {
   position: absolute;
   inset: 0;
-  container-type: inline-size;
 }
 
 /* SVG Road */
@@ -282,8 +281,8 @@ body {
 /* ── Moving Car (truck) ────────────────────── */
 .road-car {
   position: absolute;
-  width: clamp(36px, 8.73cqw, 88px);
-  height: clamp(36px, 8.73cqw, 88px);
+  width: 88px;
+  height: 88px;
   z-index: 10;
   /* JS will set left/top via transform */
   transform: translate(-50%, -50%);
@@ -302,8 +301,8 @@ body {
 /* ── Step Icons ─────────────────────────────── */
 .step-icon {
   position: absolute;
-  width: clamp(28px, 7.04cqw, 71px);
-  height: clamp(28px, 7.04cqw, 71px);
+  width: 71px;
+  height: 71px;
   z-index: 5;
   transform: translate(-50%, -50%);
   opacity: 0;
@@ -381,10 +380,10 @@ body {
 }
 
 .step-label--receive::before {
-  right: -5.95cqw;
+  right: -60px; 
   bottom: 100%;
-  width: calc(100% + 5.95cqw);
-  height: 18.85cqw;
+  width: calc(100% + 60px); 
+  height: 190px;
   border-bottom: 1.5px solid var(--navy);
   border-right: 1.5px solid var(--navy);
   background-color: transparent;
@@ -392,9 +391,9 @@ body {
 
 .step-label--inspect::before {
   left: 0;
-  top: -0.99cqw;
+  top: -10px;
   width: 1.5px;
-  height: 35.71cqw;
+  height: 360px;
   background-color: var(--navy);
   border: none;
 }
@@ -403,16 +402,16 @@ body {
   left: 0;
   bottom: 100%;
   width: 1.5px;
-  height: 39.68cqw;
+  height: 400px;
   background-color: var(--navy);
   border: none;
 }
 
 .step-label--hold::before {
-  right: -5.95cqw;
-  top: -0.99cqw;
-  width: calc(100% + 5.95cqw);
-  height: 22.82cqw;
+  right: -60px;
+  top: -10px;
+  width: calc(100% + 60px);
+  height: 230px; 
   border-top: 1.5px solid var(--navy);
   border-right: 1.5px solid var(--navy);
   background-color: transparent;
@@ -422,7 +421,7 @@ body {
   left: 0;
   bottom: 100%;
   width: 1.5px;
-  height: 29.76cqw;
+  height: 300px;
   background-color: var(--navy);
   border: none;
 }
@@ -442,7 +441,7 @@ body {
   font-weight: 400;
   color: var(--text-dark);
   line-height: 1.45;
-  max-width: clamp(120px, 18.35cqw, 185px);
+  max-width: 185px;
 }
 
 /*
@@ -625,50 +624,26 @@ body {
   .side-panel {
     width: 100%;
     height: auto;
-    padding: 32px 24px;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0;
+    padding: 40px 32px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
   }
 
   .main-area {
-    flex: 0 0 auto;
+    min-height: 420px;
     width: 100%;
-    min-height: 0;
-    /* Keep the same width:height ratio as the desktop design so the
-       road path, car and step-label overlays stay aligned at any width. */
-    aspect-ratio: 1008 / 769;
   }
 
   :root {
-    --fs-number: 18vw;
-    --fs-number-lg: 20vw;
-    --fs-unit: 7vw;
-    --fs-intro: 4.5vw;
-    --fs-desc: 3.2vw;
-    --fs-step-title: 2.8vw;
-    --fs-step-desc: 2vw;
-    --panel-w: 100%;
-  }
-}
-
-@media (max-width: 480px) {
-  .side-panel {
-    padding: 24px 20px;
-  }
-
-  .side-panel__desc {
-    max-width: 100%;
-  }
-
-  :root {
-    --fs-number: 22vw;
-    --fs-number-lg: 24vw;
-    --fs-unit: 9vw;
-    --fs-intro: 5.5vw;
-    --fs-desc: 4vw;
-    --fs-step-title: 3.4vw;
-    --fs-step-desc: 2.6vw;
+    --fs-number: 20vw;
+    --fs-number-lg: 22vw;
+    --fs-unit: 8vw;
+    --fs-intro: 5vw;
+    --fs-desc: 3.5vw;
+    --fs-step-title: 3vw;
+    --fs-step-desc: 2.2vw;
   }
 }