tailwind4->3

src/components/UnitTypeCard.tsx

@@ -7,18 +7,18 @@ function UnitTypeCard({ project, type }: { project: Project; type: UnitType }) {
     <Link
       target="_blank"
       to={`/unit-types/${project.slug}/${type.slug}`}
-      className="bg-white p-4 2xl:p-[1.111vw] rounded-2xl 2xl:rounded-[1.111vw] space-y-4 2xl:space-y-[1.111vw] hover:-translate-y-2 transition-[translate,box-shadow] duration-300 hover:[box-shadow:0_4px_16px_0_rgba(0,0,0,.1)]"
+      className="bg-white p-4 2xl:p-[1.111vw] rounded-2xl 2xl:rounded-[1.111vw] space-y-4 2xl:space-y-[1.111vw] hover:-translate-y-2 transition-[transform,box-shadow] duration-300 hover:[box-shadow:0_4px_16px_0_rgba(0,0,0,.1)]"
     >
       <div className="space-y-1 2xl:space-y-[0.278vw]">
         <p className="text-s text-[#00BED7]">{project.title}</p>
         <div className="flex items-center gap-2 2xl:gap-[0.556vw]">
           {type.wing && (
             <>
-              <p className="text-caption-m text-[#0D1922]/70">{type.wing}</p>
+              <p className="text-caption-m opacity-70">{type.wing}</p>
               <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
             </>
           )}
-          <p className="text-caption-m text-[#0D1922]/70">{type.floors}</p>
+          <p className="text-caption-m opacity-70">{type.floors}</p>
         </div>
       </div>
       <div className="2xl:p-[1.111vw] 2xl:rounded-[0.556vw]">
@@ -31,7 +31,7 @@ function UnitTypeCard({ project, type }: { project: Project; type: UnitType }) {
         />
       </div>
       <div className="space-y-1 2xl:space-y-[0.278vw]">
-        <p className="text-s text-[#0D1922]/70">{type.area}</p>
+        <p className="text-s opacity-70">{type.area}</p>
         <p className="text-h4 font-medium">{type.name}</p>
       </div>
     </Link>