import React from "react";
import Image from "next/image";
export default function Features3() {
  return (
    <section id="services">
      <div className="wrapper ">
        <div className="container py-[5rem] xl:!py-[7rem] lg:!py-[7rem] md:!py-[7rem]">
          <div className="flex flex-wrap mx-[-15px] xl:mx-0 lg:mx-0 !mt-[-50px] items-center">
            <div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:px-0 lg:px-0 !mt-[50px]">
              <div className="flex flex-wrap mx-[-15px] !mt-[-30px] !text-center">
                <div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
                  <div className="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-6">
                    <figure className="card-img-top overlay overlay-1 group">
                      <a href="#">
                        <Image
                          className="max-w-full h-auto"
                          alt="image"
                          src="/assets/img/photos/fs4.jpg"
                          width={600}
                          height={400}
                        />
                      </a>
                      <figcaption className="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                        <h5 className="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">
                          View Gallery
                        </h5>
                      </figcaption>
                    </figure>
                    <div className="card-body p-4">
                      <h3 className="h4 !mb-0">Products</h3>
                    </div>
                    {/*/.card-body */}
                  </div>
                  {/* /.card */}
                  <div className="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                    <figure className="card-img-top overlay overlay-1 group">
                      <a href="#">
                        <Image
                          className="max-w-full h-auto"
                          alt="image"
                          src="/assets/img/photos/fs6.jpg"
                          width={600}
                          height={400}
                        />
                      </a>
                      <figcaption className="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                        <h5 className="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">
                          View Gallery
                        </h5>
                      </figcaption>
                    </figure>
                    <div className="card-body p-4">
                      <h3 className="h4 !mb-0">Recipes</h3>
                    </div>
                    {/*/.card-body */}
                  </div>
                  {/* /.card */}
                </div>
                {/* /column */}
                <div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
                  <div className="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] xl:!mt-6 lg:!mt-6 md:!mt-6 !mb-6">
                    <figure className="card-img-top overlay overlay-1 group">
                      <a href="#">
                        <Image
                          className="max-w-full h-auto"
                          alt="image"
                          src="/assets/img/photos/fs5.jpg"
                          width={600}
                          height={400}
                        />
                      </a>
                      <figcaption className="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                        <h5 className="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">
                          View Gallery
                        </h5>
                      </figcaption>
                    </figure>
                    <div className="card-body p-4">
                      <h3 className="h4 !mb-0">Restaurants</h3>
                    </div>
                    {/*/.card-body */}
                  </div>
                  {/* /.card */}
                  <div className="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                    <figure className="card-img-top overlay overlay-1 group">
                      <a href="#">
                        <Image
                          className="max-w-full h-auto"
                          alt="image"
                          src="/assets/img/photos/fs7.jpg"
                          width={600}
                          height={400}
                        />
                      </a>
                      <figcaption className="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                        <h5 className="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">
                          View Gallery
                        </h5>
                      </figcaption>
                    </figure>
                    <div className="card-body p-4">
                      <h3 className="h4 !mb-0">Still Life</h3>
                    </div>
                    {/*/.card-body */}
                  </div>
                  {/* /.card */}
                </div>
                {/* /column */}
              </div>
              {/* /.row */}
            </div>
            {/* /column */}
            <div className="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] xl:px-0 lg:px-0 !mt-[50px]">
              <h2 className="xl:!text-[1.7rem] !text-[calc(1.295rem_+_0.54vw)] !leading-[1.25] !font-semibold !mb-3">
                My Services
              </h2>
              <p className="lead !text-[1.1rem] !leading-[1.55] font-medium">
                I would like to give you a unique photography experience,
                capture your products with excellent composition and lighting
                skills.
              </p>
              <p>
                Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum
                dolor sit amet, consectetur adipiscing elit. Nullam quis risus
                eget urna mollis ornare vel eu leo. Nullam quis risus eget urna
                mollis ornare vel eu leo. Maecenas faucibus mollis elit
                interdum. Duis mollis, est non commodo luctus, nisi erat ligula
                mollis metus auctor fringilla.
              </p>
              <a
                href="#"
                className="btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] !rounded-[50rem] !mt-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
              >
                More Details
              </a>
            </div>
            {/* /column */}
          </div>
          {/* /.row */}
        </div>
        {/* /.container */}
      </div>
      {/* /.wrapper */}
    </section>
  );
}