From 748df8b3975343b1f1ceded96856f7c6a0f0385c Mon Sep 17 00:00:00 2001
From: Sonia Ruiz <yune.vk@gmail.com>
Date: Mon, 21 Mar 2022 13:54:17 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20=F0=9F=92=84=20WIP=20About?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/home/about/About.jsx  | 11 ++++++---
 components/home/about/about.scss | 39 ++++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/components/home/about/About.jsx b/components/home/about/About.jsx
index dbf2ad4..9180a89 100644
--- a/components/home/about/About.jsx
+++ b/components/home/about/About.jsx
@@ -3,10 +3,15 @@ import md from 'markdown-it'
 const About = ({ title, image, content }) => {
   return (
     <section className="about">
-      <h2>{title}</h2>
-      {/* image */}
+      <div className="about__content">
+        <h2 className="about__title">{title}</h2>
+        {/* TODO: add image */}
 
-      <div dangerouslySetInnerHTML={{ __html: md().render(content) }} />
+        <div
+          className="about__text"
+          dangerouslySetInnerHTML={{ __html: md().render(content) }}
+        />
+      </div>
     </section>
   )
 }
diff --git a/components/home/about/about.scss b/components/home/about/about.scss
index 4a4bfda..97de1e5 100644
--- a/components/home/about/about.scss
+++ b/components/home/about/about.scss
@@ -1,2 +1,41 @@
 .about {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+
+  &__content {
+    @extend %grid;
+  }
+
+  &__title {
+    grid-column: 1 / 4;
+
+    @extend %header-2;
+
+    @media (min-width: $md) {
+      grid-column: 2 / 7;
+    }
+
+    @media (min-width: $lg) {
+      grid-column: 3 / 7;
+    }
+  }
+
+  &__text {
+    @extend %body-1;
+
+    grid-column: 1 / 4;
+
+    @media (min-width: $md) {
+      grid-column: 2 / 7;
+    }
+
+    @media (min-width: $lg) {
+      grid-column: 8 / 12;
+    }
+
+    p {
+      margin-bottom: spacing(2);
+    }
+  }
 }