سلام. وقت بخیر

https://codepen.io/Sahar_Pashaei/pen/oNQmVeL

امکانش هست راهنمایی کنید

1- چطور بین کارت‌های بخش team، فاصله ایجاد کنم؟ (چسبیدن به هم) و همچنین می‌خواستم طول و عرض کم‌تری داشته باشن ولی width و height نمی‌شه داد بهشون! (من به کلاس team یک padding: 90px دادم تا کوچیک‌تر شن!!)

2- گفتم هرکارت وقتی hover شد، یه مقدار بزرگ شه. ولی وقتی بزرگ می‌شه میوفته رو کارت‌های کناریش. تو حالت اسمال و اکس اس هم اسکرول افقی می‌خوره. این طبیعیه و فقط با کم‌تر در نظر گرفتن مقدار scale می‌شه ظاهر بهتری به افکتش داد؟

3- تو اسکرین‌های کوچک تر، overflow اتفاق میوفته و بخش کارت محصولات متن میره زیر دکمه و قیمت، و بخش اعضای تیم از کارت می‌زنه بیرون اما من نمی‌خوام اسکرول بخوره یا هاید شه بقیه متن

4- وقتی از طریق Media Query می‌گم تو حالت s و xs فونت سایز یک المنت کوچک‌تر از حالت فعلیش شه، (فرضا 14 پیکسل)، تو حالت m - l - xl هم همین استایل اعمال می‌شه!

و مجبور شدم اونجا فونت سایز رو برگردونم به سایز دیفالتش مثلا 16px!

5- خیلی متوجه نمی‌شم فاصله بین بخش‌های مختلف رو چطور مدیریت کنم! همه قسمت‌ها به هم وابسته شده

مثلا می‌خوام هرکدوم از مقادیر 1-2-3-4 (تو تصویر زیر) رو بتونم به صورت مجزا تعیین کنم،

قسمت 1 و 2 می‌خوام بچسبه به کانتینر، مثلا این اگه پدینگ لفت و پدینگ رایت رو از [class*="col-"] بگیرم درست می‌شه؛ اما سایدبار و کارت‌ها هم به هم می‌چسبن مارجین هم که ساختار رو بهم می‌ریزه?‍♀️

https://s8.uupload.ir/files/untitled_mvdx.png