Add photo grid component for careers page

Author: kylegordy

assets/_sass/component/_photo-grid.scss

@@ -0,0 +1,20 @@
+////////////////////
+// Filmstrip
+////////////////////
+
+.photo-grid {
+    display: grid;
+    grid-gap: rem-calc(10px);
+    grid-template-columns: 1fr 1fr;
+    margin: 0 auto;
+    max-width: 80vmax;
+
+    @media (min-width: 1200px) {
+        max-width: none;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+}
+
+.photo-grid img {
+    width: 100%;
+}

assets/css/main.scss

@@ -34,3 +34,4 @@
 @import "component/media-grid";
 @import "component/icon-grid";
 @import "component/action-list";
+@import "component/photo-grid";

assets/images/general/team-photo-1.jpg

@@ -31,15 +31,33 @@ <h2 class="mt-3">Help us change the way the world reads.</h2>
 
 
 <section class="bg-slate-100">
-    <div class="section-container text-center">
+    <div class="section-container pl-3 pr-3 text-center">
         <hgroup class="m-auto text-length-lg">
             <h2 id="why-scribd" class="section-heading text-plum">Why Scribd</h2>
-            <h3 class="h2">We believe that the secret to making the perfect product is making Scribd the perfect place to work.</h3>
+            <h3 class="h2 mb-3">We believe that the secret to making the perfect product is making Scribd the perfect place to work.</h3>
         </hgroup>
+
+        <div class="photo-grid">
+            <img class="rounded"
+                srcset="{{ '/assets/images/general/team-photo-1.jpg' | relative_url }},
+                        {{ '/assets/images/general/[email protected]' | relative_url }} 2x"
+                   src="{{ '/assets/images/general/team-photo-1.jpg' | relative_url }}" role="presentation" alt="">
+            <img class="rounded"
+                srcset="{{ '/assets/images/general/team-photo-2.jpg' | relative_url }},
+                        {{ '/assets/images/general/[email protected]' | relative_url }} 2x"
+                   src="{{ '/assets/images/general/team-photo-2.jpg' | relative_url }}" role="presentation" alt="">
+            <img class="rounded"
+                srcset="{{ '/assets/images/general/team-photo-3.jpg' | relative_url }},
+                        {{ '/assets/images/general/[email protected]' | relative_url }} 2x"
+                   src="{{ '/assets/images/general/team-photo-3.jpg' | relative_url }}" role="presentation" alt="">
+            <img class="rounded"
+                srcset="{{ '/assets/images/general/team-photo-4.jpg' | relative_url }},
+                        {{ '/assets/images/general/[email protected]' | relative_url }} 2x"
+                   src="{{ '/assets/images/general/team-photo-4.jpg' | relative_url }}" role="presentation" alt="">
+        </div>
     </div>
 </section>
 
-
 <section class="section-container">
     <hgroup class="m-auto text-center text-length-lg">
         <h2 id="benifits" class="section-heading text-teal">Benifits</h2>
@@ -91,7 +109,7 @@ <h5>Wellness Benefit</h5>
     <div class="section-container">
         <hgroup class="m-auto text-length-lg text-center">
             <h2 id="our-advisors" class="section-heading text-cabernet">Our Advisors</h2>
-            <h3 class="h2">We believe that the secret to making the perfect product is making Scribd the perfect place to work.</h3>
+            <h3 class="h2">You’ll have access to the best mentors in the world.</h3>
         </hgroup>
 
       <ul class="media-grid media-grid-large mt-5">