Updated with responsive typography

src/components/Polaroid.tsx

@@ -39,7 +39,7 @@ export const Polaroid: React.FC<Props> = ({ title, imageSrc, rotation }) => {
             }`}
           />
         </div>
-        <span ref={ref} className="text-2xl font-semibold">
+        <span ref={ref} className="font-semibold text-r-lg">
           {title}
         </span>
       </div>

src/components/ProjectDescription.tsx

@@ -13,14 +13,12 @@ export const ProjectDescription: React.FC<Props> = ({
 }) => {
   return (
     <div className="max-w-4xl text-black">
-      <h3 className="text-3xl font-semibold">{title}</h3>
+      <h3 className="font-semibold text-r-xl">{title}</h3>
       <Separator.Root
         className={`${color} my-2 h-1 w-full rounded-full`}
         decorative
       />
-      <p className="text-base leading-relaxed md:text-lg lg:text-xl">
+      <p className="leading-relaxed text-r-base">{children}</p>
-        {children}
-      </p>
     </div>
   );
 };

src/pages/index.tsx

@@ -15,14 +15,6 @@ const Home: NextPage = () => {
       </Head>
       <>
         <Hero />
-        <div className="">
-          <p className="text-r-3xl">48px: h1</p>
-          <p className="text-r-2xl">40px: h2</p>
-          <p className="text-r-xl">32px: h3</p>
-          <p className="text-r-lg">24px: h4, header, polaroid, button</p>
-          <p className="text-r-base">20px: h5, body</p>
-          <p className="text-r-sm">16px: h6</p>
-        </div>
         {/* <Services /> */}
         <Projects />
         {/* <About /> */}
@@ -53,14 +45,14 @@ const Hero = () => {
 const Projects = () => {
   return (
     <Container>
-      <h2 className="text-center text-4xl font-extrabold text-black">
+      <h2 className="my-10 text-center font-extrabold text-black text-r-2xl md:mt-16">
         Here are some of our past projects
       </h2>
-      <div className="py-20 [&>*:nth-child(odd)]:md:flex-row">
+      <div className="pb-20 [&>*:nth-child(odd)]:md:flex-row">
         {projects.map((p) => (
           <div
             key={p.title}
-            className="my-20 flex flex-col items-center gap-x-12 gap-y-6 md:my-0 md:flex-row-reverse"
+            className="mb-10 flex flex-col items-center gap-x-12 gap-y-6 md:flex-row-reverse lg:my-0"
           >
             <div>
               <Polaroid

tailwind.config.ts

@@ -16,7 +16,7 @@ export default {
         padding: "1.5rem",
       },
       fontSize: {
-        xs: ["0.75rem", { lineHeight: "1rem" }], // 12px 0.75rem
+        xs: ["0.875rem", { lineHeight: "1rem" }], // 14px 0.875rem
         sm: ["1rem", { lineHeight: "1.25rem" }], // 16px 1rem
         base: ["1.25rem", { lineHeight: "1.5rem" }], // 20px 1.25rem
         lg: ["1.5rem", { lineHeight: "1.75rem" }], // 24px 1.5rem