fix element spacing

Author: hmillersarah

ims-db.html

@@ -78,6 +78,8 @@
 	<!-- Hamburger menu -->
 	<script src="wp-includes/js/navbar.js"></script>
 
+	<!-- Web components -->
+	<script src="web-components/hero-section/hero-section.js" type="module"></script>
 	</head>
 
 	<!-- MASTHEAD_SITENAV_BEGIN -->
@@ -300,20 +302,13 @@ <h5>IMS support</h5>
 					<main class="zs-main" id="main">
 
 						<!-- =========================== IMS Database =========================== -->
-						<div class="banner innovate-bg">
-							<section id="intro-section" class="pure-g zs-section db-hero">
-								<div id="intro-header" class="pure-u-1"></div>
-								<div class="pure-u-3-25">
-									<img class="ims-card-icon" src="wp-content/Icon_Banner_IMS DatabasePage.svg" alt="">
-								</div>
-								<div id="intro-info" class="pure-u-1 pure-u-sm-15-24 db-hero-text">
-									<h6>Innovate</h6>
-									<h1 >IMS Database: fast, secure, reliable.</h1>
-									<p id="p-style" >Data integrity, performance, simplified use of SQL, and powerful recovery tools make IMS Database Manager
-										the best choice to protect your enterprise assets.</p>
-								</div>
-							</section>
-						</div>
+						<hero-section
+							name="IMS Database: fast, secure, reliable"
+							image="wp-content/Icon_Banner_IMS DatabasePage.svg" 
+							section="Innovate"
+							desc="Data integrity, performance, simplified use of SQL, and powerful recovery tools make IMS Database Manager
+								the best choice to protect your enterprise assets."
+						></hero-section>
 
 						<!-- =========================== Managed ACBs =========================== -->
 						<div class="zs-gray-section ibm-background-white-core macb-section">

web-components/hero-section/hero-section.css

@@ -35,7 +35,7 @@
 .hero {
     display: grid;
     grid-template-columns: 4em 2fr;
-    grid-template-rows: 4em repeat(3, 1fr);
+    grid-template-rows: 4em 4em 6em 1fr;
     padding: 3em;
     padding-top: 2em;
     align-items: center;
@@ -50,7 +50,7 @@
 img {
     grid-column: 1;
     grid-row: 2;
-    width: 2em;
+    max-width: 2em;
 }
 
 h2, h6, p {
@@ -115,6 +115,12 @@ h2, h6, p {
     background-color: var(--btn-scnd-hover);
   }
 
+@media screen and (min-width: 90em) {
+    .hero {
+        grid-template-columns: 4em 4fr 1fr;
+    }
+}
+
 @media  screen and (max-width: 27em) {
     .hero {
         display: flex;