<script lang="ts" setup>

</script>

<template>
  <div class="flex justify-center gap-5 overflow-hidden py-4 sm:gap-8">
    <div class="shadow-md relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl rotate-2">
      <NuxtImg class="w-full h-full" src="/img/nature.jpg" alt="Nature" placeholder />
    </div>
    <div class="shadow-md relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl -rotate-2">
      <NuxtImg class="w-full h-full" src="/img/nature2.jpg" alt="Nature" placeholder />
    </div>
    <div class="shadow-md relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl rotate-2">
      <NuxtImg class="w-full h-full" src="/img/nature3.jpg" alt="Nature" placeholder />
    </div>
    <div class="shadow-md relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl -rotate-2">
      <NuxtImg class="w-full h-full" src="/img/nature4.jpg" alt="Nature" placeholder />
    </div>
    <div class="shadow-md relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl rotate-2">
      <NuxtImg class="w-full h-full" src="/img/nature5.jpg" alt="Nature" placeholder />
    </div>
  </div>
</template>
