rubber text size

src/components/Button.tsx

@@ -24,7 +24,7 @@ const Button = ({
 
   return (
     <button
-      className={`min-w-[50px] py-3 px-6 transition-[background] duration-300 ease-in-out rounded-lg ${backgroundColor} ${backgroundHoverColor} ${textColor} ${
+      className={`min-w-[50px] py-3 px-6 transition-[background] duration-300 ease-in-out rounded-lg text-s ${backgroundColor} ${backgroundHoverColor} ${textColor} ${
         className ? className : ""
       }`}
     >

src/components/companyPage/InvestmentPortfolio.tsx

@@ -11,7 +11,7 @@ const projectStyles = [
 const InvestmentPortfolio = () => {
   return (
     <div className="grid grid-cols-12 xl:px-6 px-4 gap-4 2xl:gap-y-14 xl:gap-y-12 sm:gap-y-3 gap-y-5">
-      <div className="xl:h-full uppercase text-[#73787C] font-semibold xl:col-span-1 col-span-4 pb-3">
+      <div className="xl:h-full uppercase text-[#73787C] font-semibold xl:col-span-1 col-span-4 pb-3 text-caption-m">
         OUR INVESTMENT PORTFOLIO
       </div>
       {projects.map((project, index) => {
@@ -31,9 +31,9 @@ const InvestmentPortfolio = () => {
             />
             <div className="flex gap-1 pt-3 items-center">
               <div className="rounded-full bg-[#00BED7] w-3 h-3"></div>
-              <div className="">{project.title}</div>
+              <div className="text-m">{project.title}</div>
             </div>
-            <div className="text-[12px] font-semibold text-[#73787C] pt-2">
+            <div className="caption-m font-semibold text-[#73787C] pt-2">
               {project.city}
             </div>
           </div>

src/components/companyPage/OurStory.tsx

@@ -1,7 +1,8 @@
 const OurStory = () => {
   return (
     <div className="grid grid-cols-12 xl:px-6 px-4 gap-x-4">
-      <div className="uppercase text-[#73787C] font-semibold pb-3 xl:col-span-2 col-span-full">
+      {/* <div className="uppercase text-[#73787C] font-semibold pb-3 xl:col-span-2 col-span-full "> */}
+      <div className="uppercase text-[#73787C] font-semibold pb-3 xl:col-span-2 col-span-full text-caption-m">
         Our story
       </div>
       <div className="2xl:col-span-8 xl:col-span-9 col-span-full grid grid-cols-12 gap-x-4">
@@ -11,12 +12,14 @@ const OurStory = () => {
             alt="1"
             className="aspect-[7/5] rounded-2xl col-span-full object-cover"
           />
-          <p className="text-[#00BED7] font-semibold text-2xl xl:col-span-5 col-span-full pt-6">
+          {/* <p className="text-[#00BED7] font-semibold text-2xl xl:col-span-5 col-span-full pt-6 text-subheadline-s"> */}
+          <p className="text-[#00BED7] font-semibold xl:col-span-5 col-span-full pt-6 text-subheadline-s">
             IRTH is prominently positioned among the top tier establishments in
             United Arab Emirates, a family backed investment company with core
             values of trust, strength and agility.
           </p>
-          <div className="grid grid-cols-2 gap-4 text-sm 2xl:col-span-3 xl:col-span-4 col-span-full xl:pt-6 pt-4 2xl:pb-14 xl:pb-12 sm:pb-10 pb-[52px] text-[#73787C]">
+          {/* <div className="grid grid-cols-2 gap-4 text-sm 2xl:col-span-3 xl:col-span-4 col-span-full xl:pt-6 pt-4 2xl:pb-14 xl:pb-12 sm:pb-10 pb-[52px] text-[#73787C]"> */}
+          <div className="grid grid-cols-2 gap-4 text-s 2xl:col-span-3 xl:col-span-4 col-span-full xl:pt-6 pt-4 2xl:pb-14 xl:pb-12 sm:pb-10 pb-[52px] text-[#73787C]">
             <p className="xl:col-span-full sm:col-span-1 col-span-full">
               IRTH embodies the essence of legacy, anchoring its roots in the
               heart of a vibrant Dubai. As a part of a distinguished local
@@ -44,7 +47,8 @@ const OurStory = () => {
             alt="2"
             className="rounded-2xl object-cover 2xl:col-span-6 xl:col-span-7 sm:col-span-6 col-span-full 2xl:aspect-[7/4] xl:aspect-[14/9] sm:h-full aspect-[6.5/5.2] sm:order-2 order-3 "
           />
-          <div className="xl:col-start-3 grid col-span-full grid-cols-2 xl:gap-4 gap-3 sm:order-3 order-2 2xl:pb-[140px] xl:pb-[120px] sm:pb-[100px] pb-6 sm:pt-6 pt-20 text-[#73787C]">
+          {/* <div className="xl:col-start-3 grid col-span-full grid-cols-2 xl:gap-4 gap-3 sm:order-3 order-2 2xl:pb-[140px] xl:pb-[120px] sm:pb-[100px] pb-6 sm:pt-6 pt-20 text-[#73787C]"> */}
+          <div className="xl:col-start-3 grid col-span-full grid-cols-2 xl:gap-4 gap-3 sm:order-3 order-2 2xl:pb-[140px] xl:pb-[120px] sm:pb-[100px] pb-6 sm:pt-6 pt-20 text-[#73787C] text-s">
             <p className="sm:col-span-1 col-span-full">
               Our influence extends even further through strategic partnerships
               with esteemed local and international hospitality brands,

src/components/header/Auth/AuthDesktop.tsx

@@ -7,7 +7,7 @@ interface AuthProps {
 
 const AuthDesktop = ({ isAuth, userName }: AuthProps) => {
   return (
-    <div className="flex gap-4 py-2 pr-6 text-black col-span-2 justify-end">
+    <div className="flex gap-4 py-2 pr-6 text-black col-span-2 justify-end text-s">
       {isAuth ? (
         <>
           <p>{userName}</p>

src/components/header/Header/DesktopHeader.tsx

@@ -4,7 +4,7 @@ import Navbar from "../Navbar/Navbar";
 import Location from "../Location";
 
 const DesktopHeader = () => (
-  <header className="bg-white w-full text-white sm:grid grid-cols-6 text-sm font-usual">
+  <header className="bg-white w-full text-white sm:grid grid-cols-6 font-usual text-m">
     <div className="flex gap-4 col-span-2">
       <Logo />
       <Location />