diff --git a/site/layouts/partials/services.html b/site/layouts/partials/services.html
index ce699a0..ec59066 100644
--- a/site/layouts/partials/services.html
+++ b/site/layouts/partials/services.html
@@ -1,114 +1,15 @@
 <article id="services" class="l-relative l-screen-min-full services-bg">
-  <div class="l-section-pad l-wrapper l-wrapper--wide">
-    <h2 class="l-section-header">Services</h2>
-    <ul class="l-flex-list-row service-list">
-      <li class="service">
-        <ul class="l-list-bare">
-          <li class="service__header">
-            <img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
-          </li>
-          <li>
-            <h3 class="service__heading h4">Service Heading One</h3>
-            <p class="h5">Service Sub-Heading</p>
-          </li>
-          <li class="service__body">
-            <p>
-              Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus.
-            </p>
-            <p>
-              Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione.
-            </p>
-          </li>
-          <li>
-            <ul class="l-flex-list-row service__social-list">
-              <li><span class="social-icon"></span></li>
-              <li><span class="social-icon"></span></li>
-              <li><span class="social-icon"></span></li>
-            </ul>
-          </li>
-        </ul>
-      </li>
-      <li class="service">
-        <ul class="l-list-bare">
-          <li class="service__header">
-            <img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
-          </li>
-          <li>
-            <h3 class="service__heading h4">Service Heading Two</h3>
-            <p class="h5">Service Sub-Heading</p>
-          </li>
-          <li class="service__body">
-            <p>
-              Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus.
-            </p>
-            <p>
-              Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus.
-            </p>
-            <p>
-              Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione.
-            </p>
-          </li>
-          <li>
-            <ul class="l-flex-list-row service__social-list">
-              <li><span class="social-icon"></span></li>
-              <li><span class="social-icon"></span></li>
-              <li><span class="social-icon"></span></li>
-              <li><span class="social-icon"></span></li>
-              <li><span class="social-icon"></span></li>
-            </ul>
-          </li>
-        </ul>
-      </li>
-      <li class="service">
-        <ul class="l-list-bare">
-          <li class="service__header">
-            <img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
-          </li>
-          <li>
-            <h3 class="service__heading h4">Service Heading Three</h3>
-            <p class="h5">Service Sub-Heading</p>
-          </li>
-          <li>
-            <p class="service__body">
-              Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione.
-            </p>
-          </li>
-          <li>
-            <ul class="l-flex-list-row service__social-list">
-              <li><span class="social-icon"></span></li>
-              <li><span class="social-icon"></span></li>
-            </ul>
-          </li>
-        </ul>
-      </li>
-      <li class="service">
-        <ul class="l-list-bare">
-          <li class="service__header">
-            <img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
-          </li>
-          <li>
-            <h3 class="service__heading h4">Service Heading Four</h3>
-            <p class="h5">Service Sub-Heading</p>
-          </li>
-          <li>
-            <p class="service__body">
-              Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus.
-            </p>
-            <p>
-              Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione.
-            </p>
-          </li>
-          <li>
-            <ul class="l-flex-list-row service__social-list">
-              <li><span class="social-icon"></span></li>
-              <li><span class="social-icon"></span></li>
-              <li><span class="social-icon"></span></li>
-              <li><span class="social-icon"></span></li>
-            </ul>
-          </li>
-        </ul>
-      </li>
-    </ul>
-  </div>
+
+    <div class="l-underlay services-bg"></div>
+
+    <h2 class="l-section-header">services</h2>
+
+    <div class="l-section-pad l-wrapper services-section">
+			A Services Section.
+    </div>
+
+    <div class="l-section-pad l-wrapper services-section">
+			Another services Section.
+    </div>
 </article>
 
diff --git a/src/css/imports/services.scss b/src/css/imports/services.scss
new file mode 100644
index 0000000..6f267b8
--- /dev/null
+++ b/src/css/imports/services.scss
@@ -0,0 +1,7 @@
+.services-bg {
+  background-color: rgba(green, 0.5);
+}
+
+.services-section {
+  background-color: rgba(green, 0.5);
+}
diff --git a/src/css/main.css b/src/css/main.css
index 02757cf..eec1b5e 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -14,6 +14,7 @@
 @import "imports/header.scss";
 @import "imports/hero.scss";
 @import "imports/about.scss";
+@import "imports/services.scss";
 
 @import "mapbox-gl/dist/mapbox-gl.css";
 
@@ -142,63 +143,6 @@ html.is-animating .transition-fade {
   }
 }
 
-// services
-
-.services-bg {
-  color: var(--neutral-300);
-  background-color: var(--primary-700);
-}
-
-.service-list {
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-.service {
-  flex: 0 0 100%;
-  text-align: center;
-  margin-bottom: 2.5rem;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  @media (min-width: $bp-m) {
-    flex: 0 0 calc(50% - 2.5rem);
-  }
-
-  @media (min-width: $bp-l) {
-    flex: 0 0 calc(25% - 2.5rem);
-  }
-}
-
-.service__header {
-  display: inline-block;
-  width: 7em;
-  height: 7em;
-  margin-bottom: 1.25rem;
-}
-
-.service__img {
-  width: 100%;
-  height: auto;
-  border-radius: 50%;
-}
-
-.service__heading {
-  margin-bottom: 0.125em;
-}
-
-.service__body {
-  @media (min-width: $bp-s) {
-    font-size: 0.9em;
-  }
-}
-
-.service__social-list {
-  font-size: 2em;
-}
-
 // contact
 
 .contact-bg {