<template>
  <div class="card | physical-sample">
    <header
      class="text-center rounded-lg py-32"
      :style="'--cover: url(' + step.cover + ')'"
    >
      <h3 class="text-lg font-serif">
        <router-link :to="'/' + step.uri" class="link-full">{{
          step.title
        }}</router-link>
      </h3>
      <time class="font-medium text-sm py-8" :datetime="step.date">{{
        step.date
      }}</time>
      <p>{{ step.description }}</p>
    </header>
    <img
      :src="step.files[0].url"
      alt=""
      loading="lazy"
      class="rounded-lg mt-16"
    />
  </div>
</template>
<script setup>
const { step } = defineProps({ step: Object });
</script>
