bg images vs layout

homepage/theme/static/css/fix.css

@@ -66,12 +66,13 @@ LAYOUT
   }
 }
 /* Custom Tachyons class */
+.w55-container,
 .w55 {
-  width: 18.5rem;
+  width: 20rem;
 }
 /* Custom media query - extra small */
-@media only screen and (max-width: 30em) {
+@media only screen and (max-width: 40em) {
-  .w55 {
+  .w55-container {
     width: 100%;
   }
 }
@@ -347,6 +348,10 @@ GRAPHICS
 		background-position: 10px 60px;
 	}
 }
+#bg-temp {
+  background: url(/theme/images/temp.png) center;
+	background-repeat: no-repeat;
+}
 #bg-feature {
   background: url(/theme/images/gfx-pattern-mint-bright.svg) center;
 }

homepage/theme/templates/base.html

@@ -86,7 +86,7 @@
           <div class="pt3 pb6 ph3" id="bg-cta-bottom">
             <div class="mw8 center">
               <div class="flex flex-wrap justify-center">
-                <div class="w55 mh3 pt5 tc">
+                <div class="w55 ph3 pt5 tc">
                   <h2 class="f25 normal lh-solid ma0 mb3">
                     Participate
                   </h2>
@@ -96,7 +96,7 @@
                   <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
                 </div>
                 {% if is_article != 'true' %}
-                <div class="w55 mh3 pt5 tc">
+                <div class="w55 ph3 pt5 tc">
                   <h2 class="f25 normal lh-solid ma0 mb3">
                     In the making
                   </h2>
@@ -106,7 +106,7 @@
                   <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="/blog/">Project status</a>
                 </div>
                 {% endif %}
-                <div class="w55 mh3 pt5 tc">
+                <div class="w55 ph3 pt5 tc">
                   <h2 class="f25 normal lh-solid ma0 mb3">
                     Ethical internet
                   </h2>

homepage/theme/templates/index.html

@@ -30,6 +30,55 @@
     </div>
   </div>
 
+
+
+
+  <div class="w-100" id="bg-feature">
+
+      <div class="center pt4 pb5">
+
+          <div class="flex flex-wrap justify-center w-100">
+
+            <div class="w55-container flex justify-center" id="bg-temp">
+              <div class="w55 tc pa3">
+                <h2 class="f25 normal lh-solid mt7 mb3">
+                  <em>Free & Open</em>
+                </h2>
+                <p class="ma0">
+                  Anyone can audit our open source code to verify it works as intended. Offen will always be available for free.
+                </p>
+              </div>
+            </div>
+            <div class="w55-container flex justify-center" id="bg-temp">
+              <div class="w55 tc pa3">
+                <h2 class="f25 normal lh-solid mt7 mb3">
+                  <em>Fair & Secure</em>
+                </h2>
+                <p class="ma0">
+                  Pay respect to your website visitors and gain insights as a user at the same time. All data is encrypted end-to-end.
+                </p>
+              </div>
+            </div>
+            <div class="w55-container flex justify-center" id="bg-temp">
+              <div class="w55 tc pa3">
+                <h2 class="f25 normal lh-solid mt7 mb3">
+                  <em>Easy to use</em>
+                </h2>
+                <p class="ma0">
+                  Simply paste our code into the source of your website. Users can visit the auditorium to access their data.
+                </p>
+              </div>
+            </div>
+
+          </div>
+
+      </div>
+
+  </div>
+
+
+
+<!--
   <div class="w-100 cclr-mid-mint">
     <div class="pt3 pb6 ph3" id="bg-feature">
       <div class="mw8 center">
@@ -62,7 +111,7 @@
       </div>
     </div>
   </div>
-
+-->
 
   <div class="w-100 cclr-mid-black white">
     <div class="pt3 pb6 ph4" id="bg-cta-top">