<template>
  <header
    class="flex | text-center"
    style="
      --image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
    "
  >
    <!-- $inspiration->cover()->url() -->
    <h2 class="inspiration__title | font-serif | text-lg | new">
      Shape of Nature
    </h2>
    <!-- $inspiration->title() + class="new" if $inspiration->new()->isTrue() -->
    <time class="inspiration__date | font-medium | text-sm" datatime="2024-04"
      >Avril 2024</time
    >
    <!-- $inspiration->date() -->
    <p class="inspiration__description">
      Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in
      consequat porta mauris hendrerit malesuada viverra turpis.
    </p>
    <!-- $inspiration->description() -->
  </header>
</template>

<style scoped>
.inspiration > header {
  --direction: column;
  --justify: center;
  --row-gap: var(--space-8);
  clear: both;
  height: 15rem; /* 240px */
  background: linear-gradient(to right, transparent, var(--color-white-50) 100%),
    var(--image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: var(--space-16);
  border-radius: var(--rounded-lg);
}
.inspiration__title.new::after {
  content: "Nouveauté";
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--rounded-sm);
  background-color: var(--color-primary-10);
  color: var(--color-primary-100);
  margin-left: var(--space-16);
  padding: var(--space-4) var(--space-12);
  transform: translateY(-0.1em);
}
.inspiration__date,
.inspiration__description {
  color: var(--color-grey-700);
}
</style>
