Updated responsive euromat layout

src/app/app.vue

@@ -175,6 +175,10 @@
   h2 {
     font-size: $font-size-large;
     color: $text-color-secondary;
+
+    @media (max-width: 768px) {
+      font-size: $font-size-large - 50%;
+    }
   }
 
   p {
@@ -199,14 +203,6 @@
     justify-content: center;
     position: relative;
 
-    main {
-      width: 100%;
-      max-width: $app-width;
-      padding: 0 $small-gap;
-      position: relative;
-      z-index: 1;
-    }
-
     header,
     footer {
       width: 100%;
@@ -218,13 +214,13 @@
     justify-content: space-between;
     align-items: flex-start;
     padding: $base-gap $small-gap 0 $base-gap;
+    margin-bottom: $base-gap;
 
     @media (max-width: 650px) {
       flex-direction: column;
       justify-content: center;
       align-items: center;
       padding: $small-gap - 5;
-      margin-bottom: $base-gap;
     }
   }
 
@@ -234,6 +230,19 @@
     }
   }
 
+  main {
+    width: 100%;
+    max-width: $app-width;
+    padding: 0 $small-gap;
+    position: relative;
+    z-index: 1;
+    margin-bottom: $base-gap * 3;
+
+    @media (max-width: 768px) {
+      margin-bottom: $base-gap;
+    }
+  }
+
   footer {
     position: fixed;
     bottom: 0;

src/app/euromat/components/euromat.vue

@@ -136,9 +136,15 @@
   @import "~styles/colors";
   @import "~styles/layout";
 
+  $breakpoint: 835px;
+
   .euromat {
     display: flex;
     align-items: flex-start;
+
+    @media (max-width: $breakpoint) {
+      flex-direction: column;
+    }
   }
 
   .header-progress {
@@ -149,6 +155,15 @@
     margin-right: $base-gap * 2;
     color: $text-color-secondary;
 
+    @media (max-width: $breakpoint) {
+      flex: 1;
+      width: 100%;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-right: 0;
+      margin-bottom: 0;
+    }
+
     > div {
       display: flex;
     }
@@ -157,6 +172,10 @@
       font-size: $font-size-large;
       font-weight: 600;
       display: inline;
+
+      @media (max-width: $breakpoint) {
+        font-size: $font-size-large - 50%;
+      }
     }
 
     .progress-current {
@@ -165,6 +184,11 @@
 
     button {
       margin-top: $base-gap;
+
+      @media (max-width: $breakpoint) {
+        margin-top: 0;
+        margin-left: $base-gap;
+      }
     }
   }
 
@@ -205,5 +229,15 @@
     li:not(:last-child) {
       margin-right: $small-gap;
     }
+
+    @media (max-width: $breakpoint) {
+      flex-direction: column;
+      margin-bottom: $base-gap;
+
+      li:not(:last-child) {
+        margin-right: 0;
+        margin-bottom: $small-gap;
+      }
+    }
   }
 </style>

src/styles/layout.scss

@@ -1,8 +1,8 @@
 $font-size-small: 90%;
 $font-size-base: 16px;
 $font-size-medium: 115%;
-$font-size-xlarge: 275%;
 $font-size-large: 225%;
+$font-size-xlarge: 275%;
 
 $small-gap: 20px;
 $base-gap: 30px;