feat: mission tab first draft

components/ThirdTabContent.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="tab-content grid md:overflow-hidden">
+    <template v-for="(mission, index) in $store.state.missions">
+      <progress-button
+        :key="index"
+        :label="mission.name"
+        :description="mission.description"
+        :max="100"
+        :value="50 * (2 - index)"
+      />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.tab-content {
+  --columns: 1;
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  grid-gap: 1rem;
+}
+/* md */
+@media (min-width: 768px) {
+  .tab-content {
+    --columns: 2;
+  }
+}
+/* 2xl */
+@media (min-width: 1536px) {
+  .tab-content {
+    --columns: 3;
+  }
+}
+</style>