responsive page doctor item & page booking

components/doctor/detailDoctor/cards/locations/Item.js

@@ -39,16 +39,19 @@ function Item({ data }) {
                         'max-h-0'}
                 `}
             >
-                <div className="gap-4 flex flex-col items-start mt-[24px]">
+                <div className="gap-3 md:gap-4 flex flex-col items-start mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px]">
                     <p className="text-[#525252] text-[16px] font-normal">آدرس: {data.address}</p>
                     <p className="text-[#525252] text-[16px] font-normal">تلفن: {data.phone}</p>
                     <p className="text-[#525252] text-[16px] font-normal">روزهای کاری: {data.working_days}</p>
                 </div>
                 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d99748.77423686371!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e1!3m2!1sen!2snl!4v1724802057795!5m2!1sen!2snl"
-                    className='w-full h-[470px] rounded-lg mt-4'
+                    className='
+                        w-full rounded-lg mt-4
+                        h-[219px] sm:h-[302px] md:h-[385px] lg:h-[470px]
+                    '
+                    referrerPolicy="no-referrer-when-downgrade"
                     allowFullScreen=""
                     loading="lazy"
-                    referrerPolicy="no-referrer-when-downgrade"
                 ></iframe>
             </div>
         </>

components/doctor/detailDoctor/cards/locations/index.js

@@ -4,7 +4,7 @@ function Locations({ doctor }) {
     return (
         <div>
             <p
-                className="text-[#525252] text-[20px] font-bold"
+                className="text-[#525252] text-[16px] md:text-[18px] lg:text-[20px] font-bold"
             >موقعیت مکانی </p>
             <ul className="flex w-full mt-[24px] flex-col justify-center items-start">
                 {doctor.locations.map((item, idx) => (
@@ -14,7 +14,7 @@ function Locations({ doctor }) {
                             data={item}
                         />
                         {doctor.locations.length > idx + 1 && (
-                            <span className="w-full h-px bg-[#EFEFEF] block my-[16px]"></span>
+                            <span className="w-full h-px bg-[#EFEFEF] block my-[12px] md:my-[14px] lg:my-[16px]"></span>
                         )}
                     </li>
                 ))}