homepage hero section grid fix

Author: hmillersarah

index.html

@@ -99,21 +99,21 @@
        </section>
 
       <!-- =========================== Hero =========================== -->
-      <section class="black-bg pure-g">
-          <div class="pure-u-md-12-24">
-            <div class="vertical-g homepage-hero">
+      <section class="black-bg">
+        <div class="homepage-hero">
+          <div class="section-header">
               <h1>IBM <b>IMS Central</b></h1>
               <p>Welcome! IMS™ Central is your hub for all things IMS.</p>
               <p>Build your skills, find documentation, get help, and engage with the team.</p>
-            </div>
           </div>
-          <div class="pure-u-md-12-24 gif">
+          <div class="gif">
               <a href="https://mediacenter.ibm.com/media/Intro+to+IMS+-+What+is+IMSF/0_beoagp8k/139456202"
                 target="_blank" rel="noopener noreferrer" aria-label="Watch Intro to IMS">
                 <img src="wp-content/introIMS.png" class="gif-cover" alt="Intro to IMS video preview">
                 <img src="wp-content/introIMSclip.gif" class="gif-video" alt="Intro to IMS video preview">
               </a>
           </div>
+        </div>
       </section>
 
       <!-- =========================== Learn =========================== -->

wp-includes/css/page.css

@@ -333,14 +333,6 @@ h6 {
 .hr-container {
   padding: 2em 0em 3em 0em;
 }
-
-/* Format vertical group */
-.vertical-g {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  height: 100%;
-}
 /* -------------------------------------------------------- */
 
 /* Quotations */
@@ -508,8 +500,17 @@ h6 {
 }
 
 /* Index hero */
+.homepage-hero {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 2em;
+  align-items: center;
+  justify-content: center;
+}
+
 .homepage-hero h1 {
   font-size: var(--plex-48);
+  line-height: var(--plex-20);
 }
 
 .homepage-hero p {
@@ -554,6 +555,23 @@ h6 {
   .dark-gray-bg h4 {
     font-size: var(--plex-20) !important;
   }
+
+  /* Index hero */
+  .homepage-hero {
+    flex-flow: row wrap;
+  }
+
+  .homepage-hero .section-header {
+    display: flex;
+    flex-flow: column wrap;
+    justify-content: center;
+    align-items: center;
+    padding-right: 0;
+  }
+
+  .homepage-hero h1 {
+    font-size: var(--plex-36);
+  }
 }
 
 /* 1024px and below screen sizes */