update styling to fix spacing, sizing issues

Author: hmillersarah

ims-apis.html

@@ -64,7 +64,6 @@
       href="wp-includes/css/homepage.css" />
     <link rel="stylesheet" href="wp-includes/css/nav.css" />
     <link rel="stylesheet" href="wp-includes/css/dropnav.css" />
-    <link href="wp-includes/css/pages/apis.css" rel="stylesheet" />
     <link rel="stylesheet" href="wp-includes/css/page.css" />
 
     <!-- Hotjar Tracking Code for ibm.com/demos &  githhub -->
@@ -112,7 +111,8 @@
         name="IBM z/OS Connect"
         image="wp-content/icons/icon_zos_connect.svg"
         section="Innovate"
-        desc="Create and deploy RESTful APIs that access IMS™ applications and data in minutes with point and click Eclipse tooling."></hero-section>
+        desc="Create and deploy RESTful APIs that access IMS™ applications and data in minutes with point and click Eclipse tooling.">
+      </hero-section>
 
       <!-- =========================== Call APIs from Z =========================== -->
       <section class="white-bg pure-g">
@@ -130,8 +130,8 @@ <h2>Call APIs from Z</h2>
           </a>
         </div>
         <div class="pure-u-1">
-          <div class="pure-g pure-g-pad">
-            <div class="pure-u-1 pure-u-lg-1-2">
+          <div class="pure-g pure-g-pad-wd">
+            <div class="pure-u-1 pure-u-md-1-2">
               <h4>Designed for DevOps</h4>
               <p>
                 Drive agility across your development teams with parallel
@@ -148,7 +148,7 @@ <h4>Designed for DevOps</h4>
                 >Learn more →</a
               >
             </div>
-            <div class="pure-u-1 pure-u-lg-1-2">
+            <div class="pure-u-1 pure-u-md-1-2">
               <h4>Monitor end-to-end API requests</h4>
               <p>
                 Keep all your IBM z/OS Connect APIs running smoothly using tools
@@ -169,7 +169,7 @@ <h4>Monitor end-to-end API requests</h4>
                 Learn more about Splunk and IBM z/OS Connect →</a
               >
             </div>
-            <div class="pure-u-1 pure-u-lg-1-2">
+            <div class="pure-u-1 pure-u-md-1-2">
               <h4>Enterprise-ready security</h4>
               <p>
                 Scale to over 100m API requests per day across highly available
@@ -186,7 +186,7 @@ <h4>Enterprise-ready security</h4>
                 >Learn more →</a
               >
             </div>
-            <div class="pure-u-1 pure-u-lg-1-2">
+            <div class="pure-u-1 pure-u-md-1-2">
               <h4>Active 3rd party ecosystem</h4>
               <p>
                 IBM z/OS Connect is pluggable and extensible, offering 3rd party
@@ -276,7 +276,7 @@ <h2>Case studies</h2>
         </div>
         <div class="pure-u-1 pure-u-md-3-4">
           <div class="pure-g pure-g-pad">
-            <div class="pure-u-1 pure-u-sm-1-2">
+            <div class="pure-u-1 pure-u-lg-1-2">
               <h3>
                 Efficient, low-risk modernization of core banking applications
               </h3>
@@ -287,7 +287,7 @@ <h3>
               <div>
                 <img
                   src="wp-content/Icon_Atruvia_z OS ConnectPage.svg"
-                  alt="Atruvia logo" />
+                  alt="Atruvia logo" class="pure-pad-v"/>
               </div>
               <a
                 target="_blank"
@@ -297,7 +297,7 @@ <h3>
                 Read the case study →</a
               >
             </div>
-            <div class="pure-u-1 pure-u-sm-1-2">
+            <div class="pure-u-1 pure-u-lg-1-2">
               <img
                 src="wp-content/images/atruvia-casestudy.png"
                 alt="Buildings"
@@ -314,8 +314,8 @@ <h3>
           <h2>On-demand webinars</h2>
         </div>
         <div class="pure-u-1 pure-u-md-3-4">
-          <div class="pure-g pure-g-pad">
-            <div class="pure-u-1 pure-u-sm-1-2">
+          <div class="pure-g pure-g-pad-btm">
+            <div class="pure-u-1 pure-u-lg-1-2">
               <div class="pure-g">
                 <div class="pure-u-1-5 pure-u-md-1">
                   <img
@@ -340,7 +340,7 @@ <h3>A look at APIs on IBM Z</h3>
                 </div>
               </div>
             </div>
-            <div class="pure-u-1 pure-u-sm-1-2">
+            <div class="pure-u-1 pure-u-lg-1-2">
               <div class="pure-g">
                 <div class="pure-u-1-5 pure-u-md-1">
                   <img
@@ -375,10 +375,10 @@ <h3>
           <hr />
         </div>
         <!-- =========================== Communities =========================== -->
-        <div class="pure-u-1 pure-u-md-1-4 section-header">
+        <div class="pure-u-1 pure-u-lg-1-4 section-header">
           <h2>Communities</h2>
         </div>
-        <div class="pure-u-1 pure-u-md-3-4">
+        <div class="pure-u-1 pure-u-lg-3-4">
           <div class="pure-g pure-g-pad">
             <div class="pure-u-1 pure-u-sm-1-2">
               <div class="pure-g">

wp-includes/css/page.css

@@ -321,12 +321,23 @@ a {
 .pure-g-pad-v > div {
   padding: 2em 4em 2em 0em;
 }
+/* For pure grid units requiring wider padding */
+.pure-g-pad-wd > div {
+  padding: 3em 3em 0em 0em;
+}
+.pure-g-pad-btm > div {
+  padding: 1.2em 1.2em 2em 1.2em;
+}
 
 /* For individual pure grid units requiring paddings */
 .pure-pad {
   padding: 1.2em;
 }
 
+.pure-pad-v {
+  padding: 1.2em 0;
+}
+
 .pure-pad-r {
   padding: 1.2em 1.2em 1.2em 0em;
 }
@@ -546,7 +557,7 @@ a {
 
 .img-md {
   width: 100%;
-  max-width: 20em;
+  padding: 1em 0;
 }
 
 /* Index hero */
@@ -599,10 +610,15 @@ a {
   .pure-g-pad > div {
     padding: 0.4em;
   }
-
   .pure-g-pad-v > div {
     padding: 0.4em;
   }
+  .pure-g-pad-wd > div {
+    padding: 2em 0.4em 0em 0em;
+  }
+  .pure-g-pad-btm > div {
+    padding: 0.4em;
+  }
 
   /* Decrease highlight link padding for smaller screens */
   .highlight-link {
@@ -647,7 +663,7 @@ a {
   }
 }
 
-/* 1024px and 768px screen sizes */
+/* 768px to 1024px screen sizes */
 @media screen and (min-width: 48em) and (max-width: 64em) {
   .pure-u-xl-11-24 > .gif {
     display: block;
@@ -669,6 +685,14 @@ a {
     height: 100%;
     margin: 1em 1em 0em 1em;
   }
+
+  .img-md {
+    width: 100%;
+    max-height: 17em;
+    padding: 0;
+    object-fit: cover;
+    object-position: bottom;
+  }
 }
 /* -------------------------------------------------------- */