Adjusting spacing for service category list

Removing black background at mobile size for service hero
Fixing scroll for service category hero icon

src/components/hero/ServiceCatHero.js

@@ -16,8 +16,8 @@ const ServiceCatHero = ({ title, description, imageFluid, iconName }) => {
   return (
     <Container
       background="black"
-      style={{ position: 'relative' }}
-      pad={{
+      style={{ position: 'relative', overflow: 'hidden' }}
+      margin={{
         top: isMobile
           ? theme.custom.header.stickyHeight
           : theme.custom.header.height,
@@ -71,20 +71,20 @@ const ServiceCatHero = ({ title, description, imageFluid, iconName }) => {
             </Box>
           )}
         </Box>
-        {isMobile && (
-          <IconComponent
-            size="300"
-            color="dark-4"
-            style={{
-              position: 'fixed',
-              right: '-150px',
-              top: '100px',
-              zIndex: 2,
-            }}
-          />
-        )}
       </Column>
-
+      {isMobile && (
+        <IconComponent
+          size="250"
+          color="dark-4"
+          style={{
+            position: 'absolute',
+            right: '0',
+            top: '50%',
+            zIndex: 2,
+            transform: 'translate(50%, -50%)',
+          }}
+        />
+      )}
       <DownHex />
     </Container>
   );

src/components/hero/ServiceHero.js

@@ -16,24 +16,26 @@ const ServiceHero = ({ title, subtitle, pretitle, categories, imageFluid }) => {
     <Container
       background="black"
       style={{ position: 'relative' }}
-      pad={{ top: theme.custom.header.height }}
+      pad={{
+        top: isMobile
+          ? theme.custom.header.stickyHeight
+          : theme.custom.header.height,
+      }}
     >
-      {!isMobile && (
-        <Img
-          fluid={imageFluid}
-          alt="Hero"
-          style={{
-            position: 'absolute',
-            top: '0',
-            left: '0',
-            right: '0',
-            bottom: '0',
-          }}
-        />
-      )}
+      <Img
+        fluid={imageFluid}
+        alt="Hero"
+        style={{
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          right: '0',
+          bottom: '0',
+        }}
+      />
       <Column
         direction="row"
-        pad={{ bottom: 'large' }}
+        pad={{ bottom: 'xlarge' }}
         style={{ position: 'relative' }}
       >
         <Box pad="large">

src/components/pages/service-category/ServiceList.js

@@ -28,15 +28,15 @@ const listQuery = graphql`
   }
 `;
 
-const ServiceItem = ({ node, pad }) => (
-  <Box basis="1/2" pad="medium">
+const ServiceItem = ({ node, isMobile }) => (
+  <Box basis="1/2" pad={isMobile ? '0' : 'medium'}>
     <Heading level={4}>{node.frontmatter.title}</Heading>
     <Classification
       levels={node.frontmatter.levels}
       serviceName={node.frontmatter.title}
     />
     {/* Undo this "flex" if we don't want learn more to line up */}
-    <Box flex="grow" pad={{ vertical: pad }}>
+    <Box flex="grow" pad={{ vertical: isMobile ? '0' : 'small' }}>
       <Paragraph fill>{node.frontmatter.excerpt || node.excerpt}</Paragraph>
     </Box>
 
@@ -49,14 +49,6 @@ const ServiceItem = ({ node, pad }) => (
   </Box>
 );
 
-const rowPad = {
-  xsmall: '0',
-  small: '0',
-  medium: 'medium',
-  large: 'medium',
-  xlarge: 'medium',
-};
-
 const ServiceList = ({ categories }) => {
   const {
     allMarkdownRemark: { nodes },
@@ -71,12 +63,7 @@ const ServiceList = ({ categories }) => {
   const isMobile = ['xsmall', 'small'].includes(size);
 
   return (
-    <Box
-      pad={{ vertical: 'large' }}
-      background="white"
-      style={{ zIndex: 5 }}
-      id="main-content"
-    >
+    <Box pad={{ vertical: 'large' }} id="main-content">
       {catGroup.map((group, i) => (
         <Box key={categories[i]} gap="small">
           {categories.length > 1 && (
@@ -107,8 +94,12 @@ const ServiceList = ({ categories }) => {
                       gap="large"
                       key={item1.id}
                     >
-                      {item1 && <ServiceItem node={item1} pad={rowPad[size]} />}
-                      {item2 && <ServiceItem node={item2} pad={rowPad[size]} />}
+                      {item1 && (
+                        <ServiceItem node={item1} isMobile={isMobile} />
+                      )}
+                      {item2 && (
+                        <ServiceItem node={item2} isMobile={isMobile} />
+                      )}
                     </Box>
                   );
                 })}