In this styling, the component is aligned perfectly when it is not wrapped in the Link. The first image is the code wrapped in the Link and the second is without the wrapped link and how it should normally work.

How do I make it retain that styling with the Link?

const ServiceCard = ({ id, icon, title, details }) => {
  return (
    <>
      <Link href={`/services/${id}`}>
        <div className="w-full px-4 md:w-1/2 lg:w-1/3">
          <div className="mb-9 rounded-[20px] bg-white p-10 shadow-2 hover:shadow-lg md:px-7 xl:px-10">
            <div className="mb-8 flex h-[70px] w-[70px] items-center justify-center rounded-2xl bg-primary">
              {icon}
            </div>
            <h4 className="mb-[14px] text-2xl font-semibold text-dark ">
              {title}
            </h4>
            <p className="text-body-color">{details}</p>
          </div>
        </div>
      </Link>
    </>
  );
};