<template>
  <div class="grid grid-cols-[32px_1fr] items-start gap-4 max-[640px]:grid-cols-1">
    <div
      class="grid h-8 w-8 place-items-center rounded-full bg-slate-900 text-[13px] font-bold text-white max-[640px]:h-7 max-[640px]:w-7"
    >
      {{ step }}
    </div>
    <div class="grid gap-3 rounded-2xl border border-gray-200 bg-white p-4 shadow-[0_12px_28px_rgba(0,0,0,0.08)]">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  step: number
}>()
</script>
