
import SectionTitle from '../../SectionTitle'

export default function Gallery() {
    return <section>
        <div className="max-w-300 2xl:max-w-340  mx-auto p-4 space-y-6  sm:space-y-10">
            {/* Heading */}
            {/* <div className="text-center max-w-2xl mx-auto flex flex-col items-center">
                                <span className="text-sm uppercase tracking-widest text-gray-500">
                                    Gallery
                                </span>
                                <h2 className="mt-2 text-3xl lg:text-4xl font-serif text-gray-900">
                                    Moments From Our Stay
                                </h2>
                            </div> */}

            <SectionTitle center subtitle='Gallery' title='Moments From Our Stay' />
            {/* Gallery Grid */}
            <div className="grid grid-rows-3 grid-cols-5 gap-2">


                {/* Row 1 */}
                <div className="col-span-2 row-span-2   overflow-hidden">
                    <img
                        src="/images/hotel/inside.jpg"
                        alt=""
                        className="w-full h-full object-cover"
                    />
                </div>

                <div className="col-span-1 row-span-1 max-h-52 2xl:max-h-64   overflow-hidden">
                    <img
                        src="/images/rooms/room1.webp"
                        alt=""
                        className="w-full h-full object-cover"
                    />
                </div>

                <div className="col-span-2 row-span-1 max-h-52 2xl:max-h-64   overflow-hidden">
                    <img
                        src="/images/hotel/hero.webp"
                        alt=""
                        className="w-full h-full object-cover"
                    />
                </div>

                {/* Row 2 */}
                <div className="col-span-2 row-span-1 max-h-52 2xl:max-h-64  overflow-hidden">
                    <img
                        src="/images/hotel/outside.jpg"
                        alt=""
                        className="w-full h-full object-cover"
                    />
                </div>

                <div className="col-span-1 row-span-1 max-h-52 2xl:max-h-64   overflow-hidden">
                    <img
                        src="/images/rooms/room2.jpg"
                        alt=""
                        className="w-full h-full object-cover"
                    />
                </div>
                <div className="col-span-3 row-span-1  max-h-52 2xl:max-h-64   overflow-hidden">
                    <img
                        src="/images/hotel/hero.webp"
                        alt=""
                        className="w-full h-full object-cover"
                    />
                </div>
                <div className="col-span-2 row-span-1  max-h-52 2xl:max-h-64   overflow-hidden">
                    <img
                        src="/images/rooms/room2.webp"
                        alt=""
                        className="w-full h-full object-cover"
                    />
                </div>
            </div>
        </div>
    </section>
}
