text indent flexible

src/index.css

@@ -18,7 +18,6 @@ body {
   .text-caption-s {
     font-family: "Usual", sans-serif;
     line-height: 135%;
-    /* clamp(10px, 0.6774rem + 0.3226vi, 12px); */
   }
 
   .text-caption-m {
@@ -48,13 +47,11 @@ body {
   .text-subheadline-m {
     font-family: "Usual", sans-serif;
     line-height: 135%;
-    /* clamp(20px, 0.6774rem + 0.3226vi, 28px); */
   }
 
   .text-subheadline-l {
     font-family: "Usual", sans-serif;
     line-height: 135%;
-    /* clamp(32px, 0.6774rem + 0.3226vi, 48px); */
   }
 
   .text-headline-s {
@@ -63,4 +60,8 @@ body {
     letter-spacing: -0.03em;
     font-size: clamp(44px, -0.257rem + 3.7559vw, 68px);
   }
+
+  .rubber-headline-indent {
+    text-indent: clamp(209px, -0.4197rem + 16.8396vw, 842px);
+  }
 }

src/pages/Company.tsx

@@ -6,12 +6,12 @@ const Company = () => {
   return (
     <section className={`xl:py-16 py-10 font-usual ${isMobile ? "pt-24" : ""}`}>
       {/* <h1 className="uppercase font-mixcase xl:text-[56px] sm:text-[40px] xl:leading-[56px] sm:leading-[40px] text-[28px] leading-[28px] xl:indent-[261px] xl:pb-16 pb-10 xl:px-6 px-4"> */}
-      <h1 className="uppercase text-headline-s xl:indent-[261px] xl:pb-16 pb-10 xl:px-6 px-4">
+      <h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:pb-16 pb-10 xl:px-6 px-4">
         IRTH is a privately held real estate investment platform part of a large
         local family conglomerate from Dubai
       </h1>
       <OurStory />
-      <h1 className="uppercase text-headline-s xl:indent-[261px] xl:pb-16 pb-10 xl:px-6 px-4">
+      <h1 className="uppercase text-headline-s xl:rubber-headline-indent xl:pb-16 pb-10 xl:px-6 px-4">
         IRTHS’s real estate portfolio is spread across numerous projects, below
         is a snapshot of some of our current and previous investments
       </h1>