♻️ (step) extract css styles to appropriate component

src/App.vue

@@ -8,7 +8,8 @@ import FeatureSteps from '@/FeatureSteps.vue'
   </main>
 </template>
 
-<!-- <style scoped lang="scss">
-#main-app {
+<style scoped lang="scss">
+main {
+  height: calc(100vh - 2 * 1rem);
 }
-</style> -->
+</style>

src/FeatureStep.vue

@@ -41,5 +41,35 @@ const remainingBlueBuckets = computed(() =>
 
 <style scoped lang="scss">
 .feature-step {
+  header {
+    padding: 0.5rem;
+    border: solid 2px var(--background-color);
+    margin-top: 1rem;
+  }
+
+  section {
+    margin: 1rem 0;
+    flex: 1;
+  }
+
+  section ul {
+    padding: 1rem;
+  }
+
+  h5 {
+    margin-bottom: 0;
+    background-color: var(--background-color);
+    padding: 0.35rem;
+    text-align: center;
+  }
+
+  .blue-bin {
+    margin-top: 1rem;
+    border: 3px solid var(--background-color);
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 </style>

src/FeatureSteps.vue

@@ -11,5 +11,35 @@ import { featureSteps } from '@/feature-steps'
 
 <style scoped lang="scss">
 .features-steps {
+  display: flex;
+  flex: 1;
+  gap: 1rem;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  margin: 0 1rem;
+  border: 3px solid var(--background-color);
+
+  li:first-child {
+    margin-left: 1rem;
+  }
+
+  li:last-child {
+    margin-right: 1rem;
+  }
+
+  li:not(:last-child) {
+    padding-right: 1rem;
+    border-right: 3px solid var(--background-color);
+    border-radius: 0;
+  }
+
+  li {
+    flex: 1;
+    height: 100%;
+    margin: 0;
+    color: var(--background-color);
+    display: flex;
+    flex-direction: column;
+  }
 }
 </style>