Вообщем тебе нужно задать для этого контейнера идеальный размер (я хочу что бы он был большим но не слишком) вот код скинь полноценный обновленный код : 
"use client"

import { useState } from "react"
import Image from "next/image"
import { ImageModal } from "@/components/ui/image-modal"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { useEffect } from "react"

const allWorks = [
  {
    id: 1,
    image: "/шкаф-работа-1.png",
  },
  {
    id: 2,
    image: "/кухня-работа-1.png",
  },
  {
    id: 3,
    image: "/гардеробная-работа-1.png",
  },
  {
    id: 4,
    image: "/шкаф-работа-2.png",
  },
  {
    id: 5,
    image: "/кухня-работа-2.png",
  },
  {
    id: 6,
    image: "/гостиная-работа-1.png",
  },
  {
    id: 7,
    image: "/спальня-работа-1.png",
  },
  {
    id: 8,
    image: "/детская-работа-1.png",
  },
  {
    id: 9,
    image: "/шкаф-работа-3.png",
  },
  {
    id: 10,
    image: "/кухня-работа-3.png",
  }
]

export default function OurWorks() {
  const [selectedImage, setSelectedImage] = useState<string | null>(null)
  const [currentSlide, setCurrentSlide] = useState(0)

  const nextSlide = () => {
    setCurrentSlide((prev) => (prev + 1) % allWorks.length)
  }

  const prevSlide = () => {
    setCurrentSlide((prev) => (prev - 1 + allWorks.length) % allWorks.length)
  }

  const goToSlide = (index: number) => {
    setCurrentSlide(index)
  }

  // Автопрокрутка
  useEffect(() => {
    const interval = setInterval(() => {
      nextSlide()
    }, 5000)

    return () => clearInterval(interval)
  }, [currentSlide])

  const currentWork = allWorks[currentSlide]

  return (
    <>
      <section className="py-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center">
        <div className="container px-4 md:px-6 w-full">
          {/* Красивая сбалансированная форма контейнера */}
          <div className="max-w-7xl mx-auto">
            <div className="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
              
              {/* Изображение с красивыми пропорциями */}
              <div className="relative aspect-[4/3] md:aspect-[20/8] lg:aspect-[22/8] xl:aspect-[24/8]">
                <Image
                  src={currentWork.image}
                  alt="Gallery image"
                  fill
                  className="object-cover"
                />
                
                {/* Только навигация влево и вправо */}
                <button
                  onClick={prevSlide}
                  className="absolute left-8 top-1/2 -translate-y-1/2 bg-black/40 hover:bg-black/60 backdrop-blur-sm text-white p-4 rounded-full transition-all hover:scale-105 z-10"
                >
                  <ChevronLeft className="h-8 w-8" />
                </button>
                
                <button
                  onClick={nextSlide}
                  className="absolute right-8 top-1/2 -translate-y-1/2 bg-black/40 hover:bg-black/60 backdrop-blur-sm text-white p-4 rounded-full transition-all hover:scale-105 z-10"
                >
                  <ChevronRight className="h-8 w-8" />
                </button>

                {/* Индикаторы слайдов */}
                <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-3">
                  {allWorks.map((_, index) => (
                    <button
                      key={index}
                      onClick={() => goToSlide(index)}
                      className={`h-3 rounded-full transition-all hover:scale-110 ${
                        index === currentSlide 
                          ? "bg-white w-12" 
                          : "bg-white/50 hover:bg-white/70 w-3"
                      }`}
                    />
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <ImageModal
        isOpen={!!selectedImage}
        onClose={() => setSelectedImage(null)}
        src={selectedImage || ''}
        alt="Увеличенное изображение"
      />
    </>
  )
}