set experiences section responsive

src/components/SingleExperience/SingleExperience.css

@@ -4,6 +4,8 @@
     margin-bottom: 3rem;
     padding: 1.5rem;
     display: flex;
+    gap: 6rem;
+    justify-content: center;
 }
 
 .experience-card::before {
@@ -21,18 +23,17 @@
 
 
 .experience-card-left {
-    width: 50%;
+    width: 25%;
     text-align: end;
-    margin-right: 8rem;
 }
 
 .experience-card-right {
-    width: 50%;
+    width: 25%;
 }
 
 .experience-company {
     color: var(--important-color);
-    font-size: 1.2rem;
+    font-size: 1.5rem;
     margin: 0;
 }
 
@@ -74,4 +75,25 @@
     font-weight: bold;
     font-size: 1.2rem;
     line-height: 1;
+}
+
+
+
+@media (max-width: 768px) {
+    .experience-card{
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+    }
+    .experience-card::before {
+        left: 20px;
+        top: 31px;
+    }
+    .experience-card-left, .experience-card-right{
+        width: fit-content;
+        margin-left: 20px;
+    }
+    .experience-card-left{
+        text-align: left;
+    }
 }