refactor: componentize responsive grid

components/ResponsiveGrid.vue

@@ -0,0 +1,18 @@
+<template>
+  <div
+    class="grid gap-4"
+    :class="`grid-cols-${min} md:grid-cols-${mid} 2xl:grid-cols-${max}`"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    min: { type: [Number, String], default: 1 },
+    mid: { type: [Number, String], default: 2 },
+    max: { type: [Number, String], default: 3 },
+  },
+}
+</script>

pages/Missions.vue

@@ -1,33 +1,12 @@
 <template>
-  <div class="tab-content grid md:overflow-hidden">
+  <responsive-grid>
-    <template v-for="(mission, index) in $store.state.missions">
     <progress-button
+      v-for="(mission, index) in $store.state.missions"
       :key="index"
       :label="mission.name"
       :description="mission.description"
       :max="mission.completionCriteria.cost"
       :value="$store.state.currency"
     />
+  </responsive-grid>
 </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>