Change the full-width template class to .main-content-full-width

page-templates/page-full-width.php

@@ -6,8 +6,8 @@
 
 <?php get_template_part( 'template-parts/featured-image' ); ?>
 
-<div class="main-wrap full-width">
-	<main class="main-content">
+<div class="main-wrap">
+	<main class="main-content-full-width">
 		<?php while ( have_posts() ) : the_post(); ?>
 			<?php get_template_part( 'template-parts/content', 'page' ); ?>
 			<?php comments_template(); ?>

src/assets/scss/modules/_content.scss

@@ -8,42 +8,36 @@
   }
 
   &.sidebar-left {
-
     // Place the sidebar below main content on small screens ...
-      @include breakpoint(small) {
-        .main-content { order: 1; }
-        .sidebar { order: 2; }
-      }
+    @include breakpoint(small) {
+      .main-content { order: 1; }
+      .sidebar { order: 2; }
+    }
 
     // ... and to the left on medium-up screens, when using the sidebar-left template
-      @include breakpoint(medium) {
-        .main-content { order: 2; }
-        .sidebar { order: 1; }
-      }
+    @include breakpoint(medium) {
+      .main-content { order: 2; }
+      .sidebar { order: 1; }
+    }
   }
 
   // Full width template
-  &.full-width {
-    .main-content {
-      @include xy-cell(12);
-    }
+  .main-content-full-width {
+    @include xy-cell(12);
   }
 
+  // Default template
   .main-content {
-
-    // Default template
     @include breakpoint(small) {
       @include xy-cell(12);
     }
 
     @include breakpoint(medium) {
       @include xy-cell(8);
     }
-
   }
 
   .sidebar {
-
     @include breakpoint(small) {
       @include xy-cell(12);
     }