feat(home): enhance fonts and colors for sections with backgrounds

app/assets/stylesheets/static_pages.scss

@@ -31,9 +31,12 @@
 
 #money,
 #cause {
+  font-size: 120%;
+
   > .content {
     @media(min-width: 48rem) {
       max-width: 50%;
+      font-size: 130%;
     }
   }
 
@@ -62,7 +65,7 @@
     }
 
     @media (min-width: 80rem) {
-      min-height: 100vh;
+      min-height: 50vh;
     }
   }
 
@@ -149,6 +152,26 @@
     }
   }
 
+  .section {
+    &__with-background {
+      position: relative;
+
+      .overlay {
+        z-index: 1;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: black;
+        opacity: 0.5;
+      }
+
+      .content {
+        z-index: 2;
+        color: white;
+      }
+    }
+  }
+
   .retail {
     &--products {
       display: flex;

app/views/static_pages/home.html.erb

@@ -57,7 +57,8 @@
 
   <%= image_tag('donate_photo_1_mobile.jpg', class: 'mobile-section-photo', alt: 'Help us fund our mission') %>
 
-  <section id="money">
+  <section class="section__with-background" id="money">
+    <div class="overlay"></div>
     <div class="content">
       <h2>Where is your money going?</h2>
       <p>Organizing for big change requires resources. Becoming a dues- paying member is not charity. Instead, your support is an act of ongoing solidarity with other people in debt. Your money will go directly to funding:</p>
@@ -72,7 +73,8 @@
 
   <%= image_tag('donate_photo_2_mobile.jpg', class: 'mobile-section-photo', alt: 'Push us closer to future projects') %>
 
-  <section id="cause">
+  <section class="section__with-background" id="cause">
+    <div class="overlay"></div>
     <div class="content">
       <h2>What are we fighting for?</h2>
       <p>The Debt Collective believes that everyone has the right to basic needs without going into debt. We believe that there is power in numbers. Our mission is to make a better world together, including:</p>