<script setup lang="ts">
withDefaults(
  defineProps<{
    columns?: 2 | 3 | 4;
  }>(),
  { columns: 3 },
);
</script>

<template>
  <div class="admin-detail-grid" :style="{ '--detail-cols': columns }">
    <slot />
  </div>
</template>

<style scoped>
.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(var(--detail-cols, 3), minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 8px;
  align-items: start;
}
</style>
