Style/#289 acknowledgement page responsive css (#293)

* acknowledgement page hero

* body of acknowledgement page

* add css hero class need height to be fit conent

* update hero image to a full image replacing one that is cut off

* uncomment product links

* clear up css from previous version

* got rid of more unsed comments

* removed used div

* removed Hero assets which contained old hero img

src/components/CaseStudy/index.js

@@ -16,60 +16,61 @@ const CaseStudy = ({ caseData, currentScreenshot }) => {
 
   return (
     <section className="Case-Study" id={caseData.slug}>
-      {/* Top Container - client overview: title, desc / Logo, list desc, button. */}
-      <div className="container top-segment">
+      <div className="container">
         <div className="case-heading">
-          <H2 className="mb4">{caseData.title}</H2>
+          <H2>{caseData.title}</H2>
         </div>
-        <div className="columns">
-          <div className="column is-6">
-            {React.cloneElement(descriptionEl, { className: 'case-description' })}
-          </div>
-
-          <div className="column is-offset-0 top-bullets">
-            <ul>
-              {caseData.listItems[0].map((i, idx) => {
-                return (
-                  <L1>
-                    <li className="client-list-item" key={idx}>
-                      {i}
-                    </li>
-                  </L1>
-                );
-              })}
-            </ul>
+        {/* top segment */}
+        <div className=" top-segment">
+          <div className="columns">
+            {/* left paragraph */}
+            <div className="column is-6">
+              {React.cloneElement(descriptionEl, { className: 'case-description' })}
+            </div>
+            {/* right list */}
+            <div className="column is-offset-0 top-bullets">
+              <ul>
+                {caseData.listItems[0].map((i, idx) => {
+                  return (
+                    <L1>
+                      <li className="client-list-item indent-group" key={idx}>
+                        {i}
+                      </li>
+                    </L1>
+                  );
+                })}
+              </ul>
+            </div>
           </div>
         </div>
-      </div>
 
-      {/* Lower Container: Screenshots */}
-      <div className="container">
-        <div className="details">
-          <div className="details-left">
-            <div className=" details-left__img-container">
+        {/* Lower Container */}
+        <div className="bottom-segment">
+          <div className="columns">
+            <div className="column is-6 img-holder">
               <img src={caseData.details[currentScreenshot].screenshot} />
             </div>
-          </div>
 
-          <div className="details-right column is-offset-0 mt2">
-            <div>
-              <H3 className="mb2">How was Overture used?</H3>
+            <div className="column is-offset-0 ">
+              <div className="lower-title-holder indent-group">
+                <H3>How was Overture used?</H3>
+              </div>
               <ul>
                 {caseData.listItems[1].map((i, idx) => {
                   return (
                     <L1>
-                      <li className="client-list-item" key={idx}>
+                      <li className="client-list-item indent-group" key={idx}>
                         <b>{Object.keys(i)}</b> {Object.values(i)}
                       </li>
                     </L1>
                   );
                 })}
               </ul>
-            </div>
-            <div>
-              <Button className="mt3" type="primary" size="medium" link={caseData.clientLink}>
-                Check it out!
-              </Button>
+              <div className="button-holder indent-group">
+                <Button type="primary" size="medium" link={caseData.clientLink}>
+                  Check it out!
+                </Button>
+              </div>
             </div>
           </div>
         </div>