UCarousel (embla carousel) how to ensure width conforms to parents div?

<template>
  <div
    class="flex flex-col gap-5 w-full pb-16 overflow-x-hidden mx-auto max-w-[var(--ui-container)]"
  >
    <!-- Heading -->
    <div class="flex justify-between items-baseline w-full">
      <!-- Category title -->
      <p class="font-semibold text-xl">Popular Products</p>

      <!-- Link to category page with dynamic count -->
      <NuxtLink
        to="/store"
        class="flex items-center gap-1 text-muted hover:text-default font-semibold text-sm transition-colors duration-200 group"
      >
        <span>See all ({{ totalCount }})</span>
        <UIcon
          name="i-heroicons-chevron-right"
          size="12"
          class="transform transition-transform duration-200 ease-out group-hover:translate-x-0.5"
        />
      </NuxtLink>
    </div>

    <!-- Loading state -->
    <div v-if="pending" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
      <div v-for="i in 4" :key="i" class="animate-pulse">
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg h-64"></div>
      </div>
    </div>

    <!-- Products carousel with shadows -->
    <div v-else-if="products.length > 0" class="relative">
      <UCarousel
        v-slot="{ item }"
        loop
        arrows
        dots
        :autoplay="{ delay: 2500 }"
        :items="products"
        :ui="{
          container: 'transition-[height]',
          viewport: 'overflow-visible',
          item: 'basis-4/5 sm:basis-1/2 md:basis-3/7 lg:basis-1/4',
          controls: 'absolute -bottom-8 inset-x-0 md:inset-x-12',
          dots: '-top-7 md:inset-x-0 inset-x-12',
          dot: 'w-6 h-1',
        }"
        class="w-full"
      >
        <StoreProductCard :product="item" />
      </UCarousel>
    </div>
  </div>
</template>