add padding to sections

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>

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">

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>

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;

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);
 }