<div
className="relative mx-4 max-w-[1050px] flex-[0_0_80%] transition-all duration-300 ease-in-out"/>

  const [emblaRef, emblaApi] = useEmblaCarousel({
    align: 'center',
    containScroll: 'trimSnaps', //this line
  });

        
<div
className="relative mx-4 max-w-[1050px] flex-[0_0_80%] transition-all duration-300 ease-in-out"/>

  const [emblaRef, emblaApi] = useEmblaCarousel({
    align: 'center',
    containScroll: 'trimSnaps', //this line
  });

ts'
module.exports = {
    async rewrites() {
      return [
        {
          source: '/api/:path',
          destination: localhost:8000api/:path
        }
      ]
    },

ts'
module.exports = {
    async rewrites() {
      return [
        {
          source: '/api/:path',
          destination: localhost:8000api/:path
        }
      ]
    },