[TASK] Improve wizard links

Always display them next to each other. Show only the badge number on mobile, and text on larger devices.

Author: deoostfrees

Resources/Private/Sass/_Wizard.scss

@@ -7,24 +7,28 @@
 }
 
 .wizard {
-  padding: 0.2em 0em 0.2em 0.2em;
+  display: flex;
 }
 
 .wizard a {
-  padding: 22px 12px 19px;
-  position: relative;
-  display: inline-block;
-  text-decoration: none;
-  min-width: 33.00%;
-  margin-left: 3px;
-  text-align: center;
-  font-size: 18px;
-  color: $white;
-  font-weight: bold;
+  align-items: center;
   background: light-dark($colorGreyBright, $colorGreyDark);
-  text-transform: uppercase;
+  color: $white;
   cursor: pointer;
+  display: flex;
+  flex: 1;
+  font-size: 18px;
+  font-weight: bold;
+  gap: 8px;
+  justify-content: center;
   margin-bottom: 20px;
+  margin-left: 3px;
+  min-height: 68px;
+  padding: 19px 12px 19px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
 }
 
 .wizard a:hover {
@@ -113,9 +117,7 @@
 }
 
 .lux .wizard .badge {
-  margin: 0 5px 0 18px;
   position: relative;
-  top: -1px;
   border-radius: 20px;
   font-size: 18px;
   background: $white;
@@ -127,6 +129,20 @@
   }
 }
 
+.wizard a:not(:first-child) .badge {
+  @media (max-width: 1000px) {
+    transform: translateX(17px);
+  }
+}
+
+.lux .wizard .badge-text {
+  display: none;
+
+  @media (min-width: 1000px) {
+    display: inline-block;
+  }
+}
+
 .wizard a:first-child .badge {
   margin-left: 0;
 }