adding responsive 1

src/views/about/About.vue

@@ -35,4 +35,14 @@
       margin: 0 150px;
     }
   }
+
+  @media only screen and (max-width: 767px) {
+    .employees {
+      flex-direction: column;
+
+      .employee {
+        margin: 0 8px 32px;
+      }
+    }
+  }
 </style>

src/views/social/Social.vue

@@ -6,13 +6,8 @@
     <p>{{ $t('social.paragraph2') }}</p>
   </section>
   <section class="social-bottom">
-    <div class="left">
-      <p>{{ $t('social.paragraph3') }}</p>
-      <p>{{ $t('social.paragraph4') }}</p>
-    </div>
-    <div class="right">
-      <img src="@images/kid-coffee.jpg">
-    </div>
+    <img src="@images/kid-coffee.jpg">
+      <p>{{ $t('social.paragraph3') }}<br><br>{{ $t('social.paragraph4') }}</p>
   </section>
 </template>
 
@@ -26,19 +21,35 @@ import { slides } from '../../data';
     padding: 40px 98px;
     background-image: url('@images/bg_1.jpg');
     background-position: top left;
-    background-size: contain;
-    height: 600px;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+    // display: grid;
+    // grid-template-columns: 1fr 1fr;
     .left {
-      padding: 52px 32px 0 0
+      padding: 0 32px 0 0
+    }
+
+    img {
+      float: right;
+      width: 50%;
+      padding: 16px
     }
     p {
       font-weight: 500;
       color: #603809;
-      font-size: 32px;
-      line-height: 50px;
+      font-size: 24px;
+      line-height: 40px;
 
     }
   }
+
+  @media only screen and (max-width: 767px) {
+    .social-bottom {
+      padding: 16px;
+
+      img {
+        float: none;
+        width: 100%;
+        padding: 0;
+      }
+    }
+  }
 </style>