CSS tweaks, add reverse properties to services

src/components/Service.js

@@ -2,14 +2,18 @@ import React from 'react'
 import InfoBox from './InfoBox'
 
 const Service = ({ ...props }) => (
-  <div className="lg:flex items-center justify-center m-auto">
+  <div
+    className={`md:flex ${
+      props.reversed ? 'flex-row-reverse' : ''
+    } items-center justify-center m-auto`}
+  >
     <img
       src={props.img}
-      className={`w-full lg:max-w-sm p-4 z-10 ${props.imgClasses}`}
+      className={`w-full md:max-w-sm p-4 z-10 ${props.imgClasses}`}
       alt={`${props.title} agency`}
     />
     <InfoBox
-      classes="bg-white p-8 shadow lg:m-0 opacity-70 lg:max-w-sm"
+      classes="bg-white p-8 shadow md:m-0 opacity-70 md:max-w-sm"
       headline={props.title}
       text={props.text}
     />

src/pages/index.js

@@ -1,7 +1,6 @@
 import React from 'react'
 
 import SectionIntro from '../components/SectionIntro'
-import InfoBox from '../components/InfoBox'
 import Button from '../components/Button'
 import Card from '../components/Card'
 import Service from '../components/Service'
@@ -45,6 +44,7 @@ const IndexPage = ({ ...props }) => (
       />
 
       <Service
+        reversed
         img={ImgFullstack}
         title="Fullstack Web Development"
         text="We build web applications using the technologies such as JavaScript, React, Ruby on Rails, Python, Node.js, and Elixir. We write high-quality code that is maintainable and will stand the test of time"