sync

Trillo/starter/css/style.css

@@ -44,6 +44,9 @@ html {
   html ::selection {
     color: var(--color-grey-light-1);
     background-color: var(--color-primary); }
+  @media only screen and (max-width: 68.75em) {
+    html {
+      font-size: 50%; } }
 
 body {
   font-family: "Open Sans", sans-serif;
@@ -387,6 +390,11 @@ body {
   margin: 8rem auto;
   background-color: var(--color-grey-light-1);
   box-shadow: var(--shadow-dark); }
+  @media only screen and (max-width: 75em) {
+    .container {
+      margin: 0;
+      max-width: 100%;
+      width: 100%; } }
 
 .header {
   height: 7rem;

Trillo/starter/sass/_base.scss

@@ -33,6 +33,9 @@ Grey dark 3: #999
   --line: 1px solid var(--color-grey-light-2);
 }
 
+$bp-largest: 75em;
+$bp-large: 68.75em;
+
 * {
   margin: 0;
   padding: 0;
@@ -52,6 +55,10 @@ html {
     color: var(--color-grey-light-1);
     background-color: var(--color-primary);
   }
+
+  @media only screen and (max-width: $bp-large) {
+    font-size: 50%;
+  }
 }
 
 body {

Trillo/starter/sass/_layout.scss

@@ -4,6 +4,12 @@
   margin: 8rem auto;
   background-color: var(--color-grey-light-1);
   box-shadow: var(--shadow-dark);
+
+  @media only screen and (max-width: $bp-largest) {
+    margin: 0;
+    max-width: 100%;
+    width: 100%;
+  }
 }
 
 .header {