<section class="flex min-h-screen place-content-center px-6 py-16">
  <div class="h-fit w-full max-w-xs bg-card-background shadow-lg">
    <picture>
      <img
        class="h-56 w-full object-cover"
        src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8dHJhdmVsfGVufDB8fDB8fHww"
        alt=""
      />
    </picture>
    <div class="space-y-6 px-6 pb-10 pt-6">
      <article class="space-y-2">
        <span class="inline-block text-sm text-foreground/50">Travel</span>
        <h4 class="text-2xl font-medium">Planning your next trip</h4>
        <p class="text-pretty">
          Get inspired, plan your next getaway, and make unforgettable memories
          with our expert travel advice!
        </p>
      </article>
      <div class="flex items-center space-x-2">
        <a
          href="#"
          class="peer font-medium uppercase tracking-widest text-primary"
          >Read More</a
        >
        <span
          class="invisible inline-block transition-all ease-in-out peer-hover:visible peer-hover:-translate-x-1"
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="text-primary"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M5 12l14 0" />
            <path d="M13 18l6 -6" />
            <path d="M13 6l6 6" /></svg
        ></span>
      </div>
    </div>
  </div>
</section>

#Rounded Image with Title and Date

#Picture with Topic and Short Description

#Picture with Title Description Date and Likes

#Picture with Title and Author

#Large with Author Date Title Picture and Short Description