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