(tagline) center texts and icons

src/components/ContainerIcon.js

+import React from "react"
+import { ContainerIconWrapper } from "../elements"
+
+export const ContainerIcon = ({children}) => {
+    return <ContainerIconWrapper>{children}</ContainerIconWrapper>
+}
+
+export default ContainerIcon

src/components/IconFreedom.js

 import React from "react"
 import Img from "gatsby-image"
 import { useStaticQuery ,graphql } from "gatsby"
-import { iconWrapper } from "../elements"
+import { IconFreedomWrapper, TitleTaglineIconWrapper, TextTaglineIconWrapper } from "../elements"
 
 export const IconFreedom = ({ fluid }) => {
 
@@ -15,14 +15,16 @@ export const IconFreedom = ({ fluid }) => {
         }
 
 `)
-
     return (
-        <iconWrapper>
+        <IconFreedomWrapper>
             <Img fluid={fluid ? fluid : data.imageSharp.fluid} style={{
-                left: "40%",
+                margin: "auto auto auto auto",
                 width: "64px",
             }}
             />
-        </iconWrapper>
+        </IconFreedomWrapper>
+
+       
     )
+
 }

src/components/IconGdpr.js

 import React from "react"
 import Img from "gatsby-image"
 import { useStaticQuery ,graphql } from "gatsby"
-import { iconWrapper } from "../elements"
+import { IconGdprWrapper } from "../elements"
 
 export const IconGdpr = ({ fluid }) => {
 
@@ -17,13 +17,13 @@ export const IconGdpr = ({ fluid }) => {
 `)
 
     return (
-        <iconWrapper>
+        <IconGdprWrapper>
             <Img fluid={fluid ? fluid : data.imageSharp.fluid} style={{
-                right: "-40%",
+                margin: "auto auto auto auto",
                 width: "64px",
             }}
             />
-        </iconWrapper>
+        </IconGdprWrapper>
     )
 }
 

src/components/IconSecurite.js

 import React from "react"
 import Img from "gatsby-image"
 import { useStaticQuery ,graphql } from "gatsby"
-import { iconWrapper } from "../elements"
+import { IconSecuriteWrapper } from "../elements"
 
 export const IconSecurite = ({ fluid }) => {
 
@@ -17,13 +17,15 @@ export const IconSecurite = ({ fluid }) => {
 `)
 
     return (
-        <iconWrapper>
+        <div>
+        <IconSecuriteWrapper>
             <Img fluid={fluid ? fluid : data.imageSharp.fluid} style={{
-                left: "40%",
+                margin: "auto auto auto auto",
                 width: "64px",
             }}
             />
-        </iconWrapper>
+        </IconSecuriteWrapper>
+        </div>
     )
 }
 

src/components/index.js

 export * from './Commons'
 export * from './Container'
+export * from './ContainerIcon'
 export * from './TitleTagline'
 export * from './TitleIcon'
 export * from './IconSecurite'

src/elements/ContainerElements.js

@@ -4,6 +4,7 @@ import { colors, media } from "../tokens";
 export const ContainerWrapper = styled.div`
     display: grid;
     padding: 5rem 1rem 5rem 1rem;
-    gap: 0 2rem;  
+    gap: 0 2rem; 
+    margin: "auto auto auto auto", 
 `    
 ;

src/elements/ContainerIconElements.js

+import styled from "styled-components"
+import { colors, media } from "../tokens";
+
+
+export const ContainerIconWrapper = styled.div`
+display: grid;
+grid-template-columns: repeat(3, 1fr);
+grid-gap: 10px;
+grid-auto-rows: minmax(100px, auto);
+line-height: 2;
+text-align: center;
+font-size: 1rem;
+background-color: ${colors.green};
+color: ${colors.primary};
+padding-top: 30px;
+padding-bottom: 30px;
+
+  
+`    
+
+;

src/elements/ImageElements.js

 import styled from "styled-components"
 import { colors, media } from "../tokens"
 
-export const iconWrapper = styled.div`
+export const IconSecuriteWrapper = styled.div`
+grid-column: auto auto auto;
+grid-row: 2 / 3;
+overflow: hidden;
+position: relative;
+
+
+`
+export const IconFreedomWrapper = styled.div`
+    grid-column: 3 / span 10;
+    grid-row: 2 / 4;
+    overflow: hidden;
+    position: relative;
+    @media ${media.medium} {
+        position: relative;
+        grid-column: 2 / span 6;
+      }
+    }
+`
+export const IconGdprWrapper = styled.div`
     grid-column: 3 / span 10;
     grid-row: 2 / 4;
     overflow: hidden;

src/elements/TitleIconElements.js

@@ -2,16 +2,9 @@ import styled from "styled-components"
 import { colors, media } from "../tokens";
 
 export const TitleIconWrapper = styled.div`
-  display: grid;
-  grid-template-columns: auto auto auto auto;
-  line-height: 2;
-  text-align: center;
-  font-size: 1rem;
-  background-color: ${colors.green};
-  color: ${colors.primary};
-  padding-top: 30px;
-  padding-bottom: 30px;
-  padding-right: 30px;
-  padding-left: 30px;
+  display: flex;
+  align-items: flex-start;
+  
   
 `
+// grid-template-columns: auto auto auto auto;

src/elements/index.js

 export * from './ContainerElements';
+export * from './ContainerIconElements';
 export * from './TitleTaglineElements';
 export * from './ImageElements';
 export * from './TitleIconElements';

src/pages/index.js

@@ -6,7 +6,7 @@ import Wrapper from "../components/Wrapper"
 import SEO from "../components/SEO"
 import RelatedPosts from "../components/RelatedPosts"
 import { Text } from "../components/Commons"
-import { Container, TitleTagline, TitleIcon } from "../components"
+import { Container, TitleTagline, TitleIcon, ContainerIcon } from "../components"
 import { iconWrapper, TitleTaglineElements } from "../elements"
 import { IconSecurite } from "../components"
 import { IconFreedom } from "../components"
@@ -50,25 +50,36 @@ const posts = data.posts.edges
           à protéger leurs codes sources de l’espionnage industriel
         </TitleTagline>
       </Container>
+
+      <ContainerIcon>
       <TitleIcon>
+        
         <div>
           <IconSecurite />
           <h2>Sécurité</h2>
           <p>Vos données sont en lieu sûr et sauvegardées toutes les nuits</p>
         </div>
+        </TitleIcon>
 
+        <TitleIcon>
         <div>
           <IconFreedom />
           <h2>Souverain</h2>
           <p>Nous sommes hébergés en France et conformes au RGPD</p>
         </div>
+      </TitleIcon>
 
-        <div>
+       
+        <TitleIcon>
+        <div >
           <IconGdpr />
           <h2>Libre</h2>
           <p>Notre solution s'appuie sur des logiciels libres et nos conditions générales sont éthiques.</p>
         </div>
+      
       </TitleIcon>
+      </ContainerIcon>
+    
       <Wrapper>
         <RelatedPosts posts={posts} />
       </Wrapper>