Fix/youtube cards mobile (#601)

* make youtube cards responsive

* make youtube videos responsive

* configure spacing in youtube videos

* fix responsive issues in youtube cards

---------

Co-authored-by: Rajneesh Verma <rajneeshverma@Rajneesh-MacBook-Air.local>

screens/home/youtube-panel/youtube-panel.module.css

@@ -1,7 +1,20 @@
 .card {
+  width: 15%;
   transition: all 0.3s ease;
 }
 
 .card:hover {
   box-shadow: 0 0 5px #808080;
 }
+
+@media (max-width: 1000px) {
+  .card {
+    width: 18%;
+  }
+}
+
+@media (max-width: 900px) {
+  .card {
+    width: 40%;
+  }
+}

screens/home/youtube-panel/youtube-panel.tsx

@@ -23,8 +23,7 @@ const YoutubePanel: React.FC<YoutubePanelProps> = ({ youtubeData }) => {
       // we are OK with sending the referer header to youtube
       rel=""
       key={index}
-      w={225}
-      m={{ base: 5, sm: "xs" }}
+      m={{ base: 5, md: "sm" }}
       className={classes.card}
       radius={"md"}
       withBorder={true}