Not an issue but help me

[Kevin Wakhisi Maraka]

I know this is silly but would you help me make them abit small, they appear large

<section class="container mx-auto p-10 md:py-20 px-0 md:p-20 md:px-0 antialiased">
        <section class="grid lg:grid-cols-2 2xl:grid-cols-3 grid-cols-1 gap-40 ">
            <article class="mx-auto max-w-sm shadow-xl bg-cover bg-center min-h-150 transform duration-500 hover:-translate-y-2 cursor-pointer group" style="background-image: url(https://images.pexels.com/photos/3299386/pexels-photo-3299386.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=900);">
                <div class="bg-black bg-opacity-20 min-h-150 px-10 flex flex-wrap flex-col pt-96 hover:bg-opacity-75 transform duration-300">
                    <h1 class="text-white text-3xl mb-5 transform translate-y-20 group-hover:translate-y-0 duration-300">
                        On A Day Like Today
                    </h1>
                    <div class="w-16 h-2 bg-yellow-500 rounded-full mb-5 transform translate-y-20 group-hover:translate-y-0 duration-300">
                    </div>
                    <p class="opacity-0 text-white text-xl group-hover:opacity-80 transform duration-500">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, beatae!
                    </p>
                </div>
            </article>

            <article class="mx-auto max-w-sm shadow-xl bg-cover bg-center min-h-150 transform duration-500 hover:-translate-y-2 cursor-pointer group" style="background-image: url(https://images.pexels.com/photos/3325720/pexels-photo-3325720.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500);">
                <div class="bg-black bg-opacity-20 min-h-150 px-10 flex flex-wrap flex-col pt-96 hover:bg-opacity-75 transform duration-300">
                    <h1 class="text-white text-3xl mb-5 transform translate-y-20 group-hover:translate-y-0 duration-300">
                        The Illusionist
                    </h1>
                    <div class="w-16 h-2 bg-orange-500 rounded-full mb-5 transform translate-y-20 group-hover:translate-y-0 duration-300">
                    </div>
                    <p class="opacity-0 text-white text-xl group-hover:opacity-80 transform duration-500">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, beatae!
                    </p>
                </div>
            </article>

            <article class="mx-auto max-w-sm shadow-xl bg-cover bg-center min-h-150 transform duration-500 hover:-translate-y-2 cursor-pointer group" style="background-image: url(https://images.pexels.com/photos/3304855/pexels-photo-3304855.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260);">
                <div class="bg-black bg-opacity-20 min-h-150 px-10 flex flex-wrap flex-col pt-96 hover:bg-opacity-75 transform duration-300">
                    <h1 class="text-white text-3xl mb-5 transform translate-y-20 group-hover:translate-y-0 duration-300">
                        Loneliness Within
                    </h1>
                    <div class="w-16 h-2 bg-red-500 rounded-full mb-5 transform translate-y-20 group-hover:translate-y-0 duration-300">
                    </div>
                    <p class="opacity-0 text-white text-xl group-hover:opacity-80 transform duration-500">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, beatae!
                    </p>
                </div>
            </article>
        </section>
        <p class="text-sm leading-relaxed text-gray-400 mt-10 text-center">
            Images by: <a target="_blank" href="https://www.pexels.com/@joao-cabral-1723948">João Cabral</a>
        </p>
    </section>

this card section in particular