implement responsive behavior

app.vue

@@ -50,8 +50,8 @@ html {
   flex: 1;
   margin: 0 15%;
 
-  @media (max-width: 1280px) {
-    margin: 0 10%;
+  @media (max-width: 1600px) {
+    margin: 0 6%;
   }
 
   @media (max-width: 600px) {

components/Badge.vue

@@ -63,7 +63,7 @@ const onMoreClick = () => {
 <style scoped lang="scss">
   .v-card {
     height: 54px;
-    width: 196px;
+    width: 95%;
     padding: 10px;
 
     .frame {
@@ -84,7 +84,7 @@ const onMoreClick = () => {
       max-width: 24px;
       height: 24px;
       width: 24px;
-      margin: 0 8px;
+      margin: 4px;
     }
 
     .v-card-title {

pages/index.vue

@@ -217,7 +217,6 @@ const showLongIntro: Ref<boolean> = ref(false)
 .introduction {
   text-align: justify;
   padding: 36px 64px;
-  border: solid 1px rgba(var(--v-theme-on-neutral), 0.4);
   border-radius: 16px;
   background: rgba(var(--v-theme-primary-alt), 0.1);
   margin-bottom: 36px;
@@ -252,6 +251,7 @@ h3 {
 .content {
   display: flex;
   flex-direction: row;
+  justify-content: space-around;
 
   .badges {
     max-width: 65%;
@@ -261,6 +261,18 @@ h3 {
     max-width: 35%;
     padding: 24px;
   }
+
+  @media (max-width: 1280px) {
+    flex-direction: column;
+
+    .badges {
+      max-width: 100%;
+    }
+
+    .cursus {
+      max-width: 100%;
+    }
+  }
 }
 
 .badges {
@@ -295,7 +307,7 @@ h3 {
   }
 
   .v-card {
-    margin: 6px 24px;
+    margin: 6px auto;
   }
 }
 </style>