Carousel with responsive basis

<script setup lang="ts">
import { Card } from "@/components/ui/card"
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"

const PIXEL = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs="
const slides = [0, 1, 2, 3, 4, 5, 6, 7]
</script>

<template>
  <Carousel :opts="{ align: 'start', startIndex: 1, duration: 0 }" class="w-full max-w-3xl">
    <CarouselContent>
      <CarouselItem v-for="index in slides" :key="index" class="sm:basis-1/2 md:basis-1/3 lg:basis-1/4">
        <div class="p-1">
          <Card class="relative aspect-3/4 overflow-hidden border-0 p-0">
            <img :src="PIXEL" :alt="`Slide ${index + 1}`" width="600" height="800" class="h-full w-full object-cover" />
          </Card>
        </div>
      </CarouselItem>
    </CarouselContent>
    <CarouselPrevious class="hidden sm:inline-flex" />
    <CarouselNext class="hidden sm:inline-flex" />
  </Carousel>
</template>