🐞 fix: Move max-width to global styles

styles/base/global.css

@@ -1,54 +1,49 @@
 /* Miscellaneous custom styles */
 @theme {
-  --spacing-menu-top:     calc(100% + .9375rem);
+    --spacing-menu-top:     calc(100% + .9375rem);
-  --spacing-section:      2rem;
+    --spacing-section:      2rem;
 
-  --shadow-menu-shadow:   0 .25rem .375rem rgba(0,0,0,0.1);
+    --shadow-menu-shadow:   0 .25rem .375rem rgba(0,0,0,0.1);
 
-  /** Breakpoints
+    /** Breakpoints
-   * The breakpoints are set to match the default Tailwind breakpoints.
+     * The breakpoints are set to match the default Tailwind breakpoints.
-   * You can override them here if you want to use different breakpoints.
+     * You can override them here if you want to use different breakpoints.
-   *
+     *
-   * @see https://tailwindcss.com/docs/breakpoints
+     * @see https://tailwindcss.com/docs/breakpoints
-   */
+     */
-  --breakpoint-*:   initial;
+    --breakpoint-*:   initial;
-  --breakpoint-xxs: 22.5rem;    /* 360px */
+    --breakpoint-xxs: 22.5rem;    /* 360px */
-  --breakpoint-xs:  29.6875rem; /* 475px */
+    --breakpoint-xs:  29.6875rem; /* 475px */
-  --breakpoint-sm:  40rem;      /* 640px */
+    --breakpoint-sm:  40rem;      /* 640px */
-  --breakpoint-md:  48rem;      /* 768px */
+    --breakpoint-md:  48rem;      /* 768px */
-  --breakpoint-lg:  64rem;      /* 1024px */
+    --breakpoint-lg:  64rem;      /* 1024px */
-  --breakpoint-xl:  70rem;      /* 1280px */
+    --breakpoint-xl:  70rem;      /* 1280px */
-  --breakpoint-2xl: 96rem;      /* 1536px */
+    --breakpoint-2xl: 96rem;      /* 1536px */
 }
 
 /* Basic layout styles */
 main#maincontent {
-  background-color: var(--color-background);
+    background-color: var(--color-background);
-  color: var(--color-text);
+    color: var(--color-text);
-  margin: 0;
+    margin: 0;
-  padding: 0 0 4rem;
+    padding: 0 0 4rem;
 }
 
 .container {
-  margin: 0 auto;
+    margin: 0 auto;
-  width: 100%;
+    max-width: 80.5rem;
-  padding-inline: clamp(1.5rem, 5vw, 3rem);
+    padding-inline: clamp(1.5rem, 5vw, 3rem);
+    width: 100%;
 }
 
 .section {
-  @apply relative my-section px-section;
+    @apply relative my-section px-section;
 
-  &:first-child {
+    &:first-child { @apply mt-0; }
-    @apply mt-0;
-  }
 
-  &:last-child, p:last-child {
+    &:last-child, p:last-child { @apply mb-0; }
-    @apply mb-0;
-  }
 
-  &.has-background {
+    &.has-background { @apply py-section bg-cover bg-no-repeat; }
-    @apply py-section bg-cover bg-no-repeat;
-  }
 }
 
 /** Allows containers inside containers
@@ -59,25 +54,15 @@ main#maincontent {
   */
 
 .content-wrapper {
-  .alignfull {
+    .alignfull { @apply max-w-full; }
-    @apply max-w-full;
-  }
 
-  .alignwide {
+    .alignwide { @apply max-w-full; }
-    @apply max-w-full;
-  }
 
-  .alignleft {
+    .alignleft { @apply ml-0 mr-auto float-none; }
-    @apply ml-0 mr-auto float-none;
-  }
 
-  .alignright {
+    .alignright { @apply ml-auto mr-0 float-none; }
-    @apply ml-auto mr-0 float-none;
-  }
 
-  .aligncenter {
+    .aligncenter { @apply mx-auto; }
-    @apply mx-auto;
-  }
 }
 
 /* Responsive embeds */

styles/components/site-header.css

@@ -5,8 +5,6 @@
     background: linear-gradient(90.15deg, #0773AC -39.25%, #032F46 100%);
 
     .header__nav-main {
-        max-width: 80.5rem;
-
         .nav-main { @apply self-stretch; }
     }
 
@@ -15,7 +13,6 @@
 
         .header__nav-aux {
             @apply px-0!;
-            max-width: 80.5rem;
         }
 
         a {

views/blocks/contact-block/contact-block.css

@@ -3,7 +3,6 @@
 .contact-block {
     background-color: var(--color-navy, #0d1f35);
     border-bottom: 1rem solid var(--color-orange, #F26B53);
-    max-width: 80.5rem;
     overflow: hidden;
     position: relative;