fix responsive design and ensure consistency of elements

components/mdx/ProjectVisitButton.tsx

@@ -5,6 +5,9 @@ type VisitButtonProps = {
 };
 
 export function ProjectVisitButton({ href }: VisitButtonProps) {
+
+	if (href === "" || href === null) { return; }
+	
 	return (
 		<div className="flex justify-center">
 			<a

components/sections/ProjectHero.tsx

@@ -21,7 +21,7 @@ export function ProjectHero({ title, description, dateLabel, locale }: props) {
                 </Link>
 
                 <div className="mx-auto flex min-h-90 max-w-4xl flex-col items-center justify-center text-center">
-                    <h1 className="text-5xl font-serif md:text-7xl">{title}</h1>
+                    <h1 className="text-[clamp(30px,4vw,64px)] font-serif">{title}</h1>
                     <p className="mt-4 font-sans text-base text-brand-beige/80">{description}</p>
 
                     <div className="mt-8 flex items-center gap-4 text-sm text-brand-beige/70">

components/ui/FeatureColumn.tsx

@@ -6,10 +6,10 @@ type props = {
 
 export const FeatureColumn = ({ imagePath, title, text }: props) => {
     return (
-        <div className="flex flex-col items-center justify-start max-w-150 h-auto gap-7">
+        <div className="flex flex-col items-center justify-start max-w-100 h-auto gap-7">
             <img className="w-33.75 h-33.75" src={imagePath} alt={`icon illustrating the text ${title}`} />
             <div className="font-serif text-brand-brown text-center leading-[1.05] text-balance text-[clamp(2rem,5vw,30px)]">{title}</div>
-            <div className="font-sans text-base text-center w-3/5">{text}</div>
+            <div className="font-sans text-base text-center">{text}</div>
         </div>
     );
 };

components/ui/ProjectCard.tsx

@@ -11,10 +11,10 @@ type props = {
 export const ProjectCard = ({ project, locale, isTheLast = false }: props) => {
 
     return (
-        <div className="w-full pb-12">
-            <div className="w-full h-px bg-brand-brown/20" />
+        <div className="w-full pb-8">
+            <div className="w-full h-px bg-brand-brown/20 mb-8" />
 
-            <Link href={`/${locale}/works/${project.slug}`} className="group block">
+            <Link href={`/${locale}/works/${project.slug}`} className="group block pointer-cursor">
                 <div className="flex flex-col gap-4 lg:flex-row lg:justify-between lg:items-center lg:gap-14 relative">
 
                     {/* Date label */}
@@ -23,14 +23,12 @@ export const ProjectCard = ({ project, locale, isTheLast = false }: props) => {
                     </div>
 
                     {/* Left image */}
-                    <div className="w-full lg:w-3/5 h-92.5 bg-gray-600 overflow-hidden">
-                        {project.preview1 ? (
-                            <img
-                                src={project.preview1}
-                                alt={project.title}
-                                className="w-full h-full object-cover transition duration-500 group-hover:scale-[1.02]"
-                            />
-                        ) : null}
+                    <div className="w-full rounded-[10px] lg:w-3/5 h-92.5 bg-gray-600 overflow-hidden">
+                        <img
+                            src={project.cover}
+                            alt={project.title}
+                            className="w-full h-full object-cover transition duration-500 group-hover:scale-[1.02]"
+                        />
                     </div>
 
                     {/* Right content */}
@@ -57,7 +55,7 @@ export const ProjectCard = ({ project, locale, isTheLast = false }: props) => {
                 </div>
             </Link>
 
-            {isTheLast && <div className="w-full h-px mt-12 bg-brand-brown/20" />}
+            {isTheLast && <div className="w-full h-px mt-8 bg-brand-brown/20" />}
         </div>
     );
 };