diff --git a/site/layouts/partials/about.html b/site/layouts/partials/about.html
index b30b5b8..f343001 100644
--- a/site/layouts/partials/about.html
+++ b/site/layouts/partials/about.html
@@ -1,5 +1,5 @@
 <article id="about" class="l-relative l-screen-min-full">
-  <div class="l-wrapper">
+  <div class="l-section l-wrapper">
     <div>
       <h2>About Heading</h2>
       <p>Lorem fuga cupiditate quidem quia earum, hic. Iusto id beatae sit similique sequi! Earum veritatis mollitia iste ipsam totam deleniti Nam cupiditate recusandae tempore ab magnam! Officiis maxime incidunt asperiores?</p>
diff --git a/site/layouts/partials/contact.html b/site/layouts/partials/contact.html
index f1875d7..28ee93c 100644
--- a/site/layouts/partials/contact.html
+++ b/site/layouts/partials/contact.html
@@ -1,5 +1,5 @@
 <article id="contact" class="l-relative l-screen-min-full contact-bg">
-  <div class="l-wrapper">
+  <div class="l-section l-wrapper">
     <h2>Contact</h2>
     <form action="https://mailthis.to/remailthis" method="POST" encType="multipart/form-data">
       <ul class="u-no-list">
diff --git a/site/layouts/partials/services.html b/site/layouts/partials/services.html
index d549b60..9a07c72 100644
--- a/site/layouts/partials/services.html
+++ b/site/layouts/partials/services.html
@@ -1,5 +1,5 @@
 <article id="services" class="l-relative l-screen-min-full services-bg">
-  <div class="l-wrapper">
+  <div class="l-section l-wrapper">
     <h2>Services</h2>
     <ul>
       <li>
diff --git a/src/css/imports/layout.scss b/src/css/imports/layout.scss
index 7bcb9af..0044cfa 100644
--- a/src/css/imports/layout.scss
+++ b/src/css/imports/layout.scss
@@ -1,10 +1,22 @@
 .l-wrapper {
   width: 100%;
-  max-width: 90rem;
+  max-width: 70rem;
   margin-left: auto;
   margin-right: auto;
 }
 
+.l-section {
+  padding: 24px 8px;
+
+  @media (min-width: $bp-m) {
+    padding: 32px 32px;
+  }
+
+  @media (min-width: $bp-l) {
+    padding: 48px 32px;
+  }
+}
+
 // #position
 
 .l-absolute {
@@ -69,6 +81,7 @@
   justify-content: center;
   padding-left: 0;
   list-style: none;
+  margin-bottom: 0;
 
   > li {
     margin-bottom: 0;
diff --git a/src/css/imports/variables.scss b/src/css/imports/variables.scss
index c266ba9..6ac8321 100644
--- a/src/css/imports/variables.scss
+++ b/src/css/imports/variables.scss
@@ -1,3 +1,8 @@
+$bp-xs: 28em;
+$bp-s: 40em;
+$bp-m: 50em;
+$bp-l: 80em;
+
 $z-index__header: 100;
 
 :root {
@@ -42,6 +47,6 @@ $z-index__header: 100;
   // --accent-quaternary-100: #fffcf4;
   // --accent-quinary-100: #ffeefc;
 
-  --color-bg: var(--neutral-100);
   --color__body: var(--neutral-600);
+  --color-bg: var(--neutral-100);
 }