<template>
  <div class="adaptive-grid" :style="{ '--grid-item-width': `${itemWidth}px` }">
    <slot />
  </div>
</template>

<script setup lang="ts">
defineProps({
  itemWidth: {
    type: Number,
    default: 340,
  },
});
</script>

<style scoped>
.adaptive-grid {
  --grid-item-width: 340px;
  flex: 1 1 0%;
  width: 100%;
  display: grid;
  grid-auto-rows: auto;
  gap: 1rem;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, var(--grid-item-width)), 1fr)
  );
}

@media (min-width: 640px) {
  .adaptive-grid {
    gap: 1.5rem;
  }
}
</style>
