Task/update partner logos [WWW-90]

assets/css/global.less

@@ -806,28 +806,96 @@ a.caret-right{
 
 // Specific rows
 .row-partners {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  img {
+    width: auto;
+    height: 48px;
+  }
+
+  // GCP, Kubernetes & Terraform Logo
+  :nth-child(2),
+  :nth-child(4),
+  :nth-child(5){
+    img {
+      height: 52px;
+    }
+  }
+
+  :nth-child(2) {
+    img {
+      margin-bottom: -2px;
+    }
+  }
+
+  #cis-badge {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid white;
+    border-radius: 4px;
+    padding: 0px 17px 5px 5px;
+
+    p {
+      margin-bottom: -4px;
+      margin-left: 3px;
+    }
+
+    img {
+      height: 25px;
+    }
+  }
+
+  .break {
+    display: none;
+  }
+
+  @media (min-width: @screen-md-min) {
+    margin: 25px 0;
+  }
+
+  @media (max-width: @screen-sm-max) {
+    width: 107%;
+  }
+
   @media (max-width: @screen-xs-max) {
-    .col-partner-hashicorp {
-      text-align: center;
+    margin: unset;
+    width: unset;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    div {
+      width: 120px;
+      margin-bottom: 30px;
+
       img {
-        margin-bottom: 30px;
+        display: block;
+        margin: 0 auto;
       }
     }
-    .col-partner-experts {
-      text-align: center;
-      div[class*="col-"] {
-        margin-bottom: 20px;
+
+    // Terraform & Kubernetes Logo
+    :nth-child(4),
+    :nth-child(5) {
+      img {
+        height: 58px;
       }
     }
-  }
-  @media (min-width: @screen-sm-min) {
-    .col-partner-experts .row + p {
-      margin-top: 15px;
+
+    .break {
+      margin: 0;
+      display: initial;
+      flex-basis: 100%;
+      height: 0;
+    }
+
+    #cis-badge {
+      width: auto;
+      margin-bottom: 0px;
+      margin-left: -10px;
+      padding-right: 14px;
     }
-  }
-  @media (min-width: @screen-sm-min) {
-    margin-top: 40px;
-    margin-bottom: 40px;
   }
 }
 
@@ -1015,30 +1083,33 @@ a.caret-right{
 }
 
 // Hero styles on the front page
-.index-page .section-hero {
-  color: #fff;
-  &:extend(.gradient-primary.gradient-vertical);
-  background: url('../img/bg-header-squares.png') center bottom no-repeat, linear-gradient(@brand-primary, #06A2FF); // This is what we need to do in order to stack a background image on top of a background gradient
-  @media (min-width: @screen-sm-min) {
-    padding-top: 30px;
-    .floating-img-infrastructure-in-a-day {
-      position: absolute;
-      width: 220px;
-      top: 30px;
-      left: -60px;
+.index-page {
+  .section-hero {
+    color: #fff;
+    &:extend(.gradient-primary.gradient-vertical);
+    background: url('../img/bg-header-squares.png') center bottom no-repeat, linear-gradient(@brand-primary, #06A2FF); // This is what we need to do in order to stack a background image on top of a background gradient
+    @media (min-width: @screen-sm-min) {
+      padding-top: 30px;
+      .floating-img-infrastructure-in-a-day {
+        position: absolute;
+        width: 220px;
+        top: 30px;
+        left: -60px;
+      }
     }
-  }
-  @media (min-width: @screen-md-min) {
-    margin-top: -(@navbar-height + 4);
-    padding-top: (@navbar-height + 4) + 90px;
-    padding-bottom: 135px;
-    .floating-img-infrastructure-in-a-day {
-      position: absolute;
-      width: auto;
-      top: -60px;
-      left: 15px;
+    @media (min-width: @screen-md-min) {
+      margin-top: -(@navbar-height + 4);
+      padding-top: (@navbar-height + 4) + 90px;
+      padding-bottom: 135px;
+      .floating-img-infrastructure-in-a-day {
+        position: absolute;
+        width: auto;
+        top: -60px;
+        left: 15px;
+      }
     }
   }
+
 }
 
 .how-it-works h1 {

pages/index/_sub-hero.html

@@ -1,16 +1,22 @@
 <div class="col-xs-12 col-sm-9 col-sm-offset-3 col-md-8 col-md-offset-4">
-  <div class="row row-partners row-center-vertically-sm">
-    <div class="col-xs-12 col-sm-4 col-partner-hashicorp">
-      <img src="/assets/img/logos-technologies/logo-hashicorp.png" />
+  <div class="row-partners">
+    <div>
+      <img src="/assets/img/logos-technologies/partner_logo_aws.png" alt="Amazon Web Services"/>
     </div>
-    <div class="col-xs-12 col-sm-4 col-partner-experts">
-      <img src="/assets/img/logos-technologies/logo-aws-pn.png" alt="Amazon Web Services Partner Network"/>
+    <div>
+      <img src="/assets/img/logos-technologies/partner_logo_gcp.png" alt="Google Cloud Platform"/>
     </div>
-    <div class="col-xs-12 col-sm-4 col-partner-experts">
-      <img src="/assets/img/logos-technologies/logo-google-cloud-partner.png" alt="Google Cloud Partner"/>
+    <div class="break"></div>
+    <div>
+      <img src="/assets/img/logos-technologies/partner_logo_kubernetes.png" alt="Kubernetes"/>
     </div>
-    <div class="col-xs-12 col-sm-4 col-partner-experts">
-      <img src="/assets/img/logos-technologies/logo-cis-securesuite.png" alt="CIS Benchmark Certified"/>
+    <div>
+      <img id="terraform" src="/assets/img/logos-technologies/partner_logo_terraform.png" alt="Terraform"/>
+    </div>
+    <div class="break"></div>
+    <div id="cis-badge">
+      <p>Compliant with:</p>
+      <img src="/assets/img/logos-technologies/partner_logo_cis.png" alt="CIS SecureSuite"/>
     </div>
   </div>
 </div>