Edit section style

app.vue

@@ -39,7 +39,7 @@
             'app-footer' auto
             / 100%;
         place-content: start center;
-        place-items: center center;
+        place-items: center;
     
         &__main {
             grid-area: app-main;

assets/styles/main.scss

@@ -35,8 +35,9 @@
 
     // Dimensions
 
-    --section-max-width: Min(100%, 80rem);
-    --content-max-width: Min(100%, 60rem);
+    --large-content-width: Min(100%, 120rem);
+    --medium-content-width: Min(100%, 80rem);
+    --small-content-width: Min(100%, 40rem);
     --regular-icon-size: 2rem;
     --regular-icon-wrapper-size: calc(var(--regular-icon-size) + 1rem);
     --small-icon-size: calc(var(--text-font-size) * var(--line-height));
@@ -290,21 +291,20 @@ form {
 // --------------------------------------------------
 
 section {
-    max-width: var(--section-max-width);
+    width: var(--medium-content-width);
     padding: 4rem 2rem;
 
     @media screen and (min-width: $tablet-media-query) {
-            padding: 4rem;
-        }
+        padding: 4rem;
+    }
 
     @media screen and (min-width: $desktop-media-query) {
         padding: 6rem;
     }
 }
 
-@mixin hero-section {
-    max-width: unset;
-    width: 100%;
+@mixin large-section {
+    width: var(--large-content-width);
 }
 
 // --------------------------------------------------

components/AppError.vue

@@ -61,10 +61,12 @@
 
     main {
         width: 100%;
+        display: flex;
+        justify-content: center;
     }
 
     .error {
-        @include hero-section;
+        @include large-section;
         display: grid;
         grid:
             'title' minmax(var(--h1-font-height), auto)

components/ContactForm.vue

@@ -104,7 +104,6 @@
     // --------------------------------------------------
 
     .contact-form {
-        max-width: var(--content-max-width);
         display: grid;
         grid:
             'name name' auto

components/ContactHeader.vue

@@ -41,7 +41,6 @@
     // --------------------------------------------------
 
     .contact-header {
-        max-width: var(--content-max-width);
         display: grid;
         place-content: start;
         place-items: start;

components/HeroSection.vue

@@ -54,7 +54,7 @@
     // --------------------------------------------------
 
     .hero {
-        @include hero-section;
+        @include large-section;
         height: 100vh;
         height: 100svh;
         display: grid;