about section

src/components/styles/About.styled.ts

@@ -2,36 +2,52 @@ import { styled } from 'styled-components';
 
 export const StyledAbout = styled.section`
   img {
-    max-width: 120px;
+    max-width: 90px;
   }
 `;
 
 export const StyledAboutItem = styled.div`
+  display: flex;
+  justify-content: flex-start;
+
+  gap: 1em;
+
+  margin-top: 50px;
   h2 {
-    position: relative;
-    display: inline-block;
-    transform: translate(20px, -15px);
     margin: 0;
-
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      height: 4px;
-      background-color: ${({ theme }) => theme.colors.primary};
-    }
-
-    &::before {
-      right: 100%;
-      transform: translate(0, 15px);
-      width: 30px;
-    }
-
-    &::after {
-      left: 0;
-      width: calc(100% + 5px);
-      transform: translate(-5px, 15px);
-    }
   }
 `;
+
+export const StyledAboutImageWrapper = styled.div`
+  display: inline-block;
+  position: relative;
+
+  &::before {
+    position: absolute;
+    content: '';
+    height: calc(100% + 100px);
+    width: 5px;
+    background-color: ${({ theme }) => theme.colors.primary};
+
+    top: 50px;
+    left: 50%;
+    z-index: -1;
+    transform: translateX(-50%);
+  }
+`;
+
+export const StyledAboutContentWrapper = styled.div``;
+
+export const StyledAboutTitle = styled.h2`
+  display: inline-block;
+  margin: 1em 0;
+  padding: 0.1em 2em 0.1em 0.5em;
+
+  background-color: ${({ theme }) => theme.colors.primary};
+`;
+
+export const StyledAboutDescription = styled.p`
+  margin: 0;
+  margin-top: 1em;
+  text-align: justify;
+`;