feat: Optimize the cyber score slider to fit better on mobile

css/style.css

@@ -443,21 +443,25 @@ button:active {
 /* Slider */
 .slider-container {
     margin: 20px 0;
-    text-align: center;
     color: var(--cyber-font-color);
     display: flex;
+	flex-wrap: wrap;
     align-items: center;
-    justify-content: center;
-    gap: 15px;
+	text-align: center;
+    gap: var(--spacing-sm) var(--spacing-md);
 }
 
 .slider-container label {
     font-size: 1.2rem;
+
+	@media (width < 568px) {
+		width: 100%;
+	}
 }
 
 input[type="range"] {
     -webkit-appearance: none;
-    width: 70%;
+    flex: 1;
     margin: 10.5px 0;
     background-color: var(--cyber-faq-bg-color);
 }
@@ -539,7 +543,6 @@ input[type="range"]::-ms-thumb {
 
 #sliderValueDisplay {
     font-size: 1.1rem;
-    margin-left: 10px;
     color: var(--cyber-primary-color);
     font-weight: bold;
 }