tailwind4->3

src/components/SelectedComplexCard.tsx

@@ -59,7 +59,7 @@ function SelectedComplexCard({
                 {marker.numberOfUnits} Apartments
               </p>
             </div>
-            <div className="rounded px-2 py-0.5 flex items-center justify-center gap-1 bg-[#30B216]/8">
+            <div className="rounded px-2 py-0.5 flex items-center justify-center gap-1 bg-[#30B216] bg-opacity-[8%]">
               <span className="text-[#30B216] size-3">
                 <HumanIcon />
               </span>
@@ -70,11 +70,11 @@ function SelectedComplexCard({
         <hr className="border-[#E2E2DC] h-px" />
         <div className="space-y-2">
           {unitTypes?.map((unitType) => (
-            <div key={unitType} className="flex items-center gap-2">
+            <div key={unitType} className="flex gap-2 items-center">
               <div className="rounded-full flex justify-center items-center size-4 bg-[#00BED7] text-white text-caption-s font-mono">
                 4
               </div>
-              <p className="opacity-70 text-caption-m">
+              <p className="text-caption-m opacity-70">
                 {formattedUnitTypes.get(unitType)}
               </p>
             </div>