Add article base mobile styles

index.html

@@ -41,27 +41,27 @@ <h1>
       to ensure that your project is successful
     </p>
 
-    <article>
+    <article class="supervisor">
       <h2>Supervisor</h2>
       <p>Monitors activity to identify project roadblocks</p>
       <img src="./images/icon-supervisor.svg" alt="Supervisor Avatar">
     </article>
 
 
-    <article>
+    <article class="team-builder">
       <h2>Team Builder</h2>
       <p>Scans our talent network to create the optimal team for your project</p>
       <img src="./images/icon-team-builder.svg" alt="Team Builder Avatar">
     </article>
 
-    <article>
+    <article class="karma">
       <h2>Karma</h2>
       <p>Regularly evaluates our talent to ensure quality</p>
       <img src="./images/icon-karma.svg" alt="Karma Avatar">
     </article>
 
 
-    <article>
+    <article class="calculator">
       <h2>Calculator</h2>
       <p>Uses data from past projects to provide better delivery estimates</p>
       <img src="./images/icon-calculator.svg" alt="Calculator Avatar">

style.css

@@ -26,7 +26,8 @@ body {
 }
 
 h1,
-p {
+p,
+article h2 {
   margin: 0;
   padding: 0;
 }
@@ -37,6 +38,7 @@ h1 {
   color: var(--clr-gray);
   letter-spacing: 0.167px;
   text-align: center;
+  margin-bottom: 1em;
 }
 
 h1 span {
@@ -46,4 +48,45 @@ h1 span {
 p {
   font-weight: 300;
   font-size: var(--text-3);
+  text-align: center;
+}
+
+article {
+  background-color: rgb(255, 255, 255);
+  box-shadow: var(--mbl-box-shadow);
+  padding: 1.75em;
+  border-radius: 0.5em;
+  max-width: 22rem;
+  justify-self: center;
+}
+
+article:not(:last-child) {
+  margin-bottom: 1.6em;
+}
+
+article p {
+  text-align: left;
+  margin-bottom: 2em;
+}
+
+.supervisor {
+  margin-top: 4.75em;
+  border-top: 3px solid var(--clr-green);
+}
+
+.team-builder {
+  border-top: 3px solid var(--clr-red);
+}
+
+.karma {
+  border-top: 3px solid var(--clr-yellow);
+}
+
+.calculator {
+  border-top: 3px solid var(--clr-blue);
+}
+
+article img {
+  display: block;
+  margin-left: auto;
 }