add full square brackets image and adjust styling

Author: cherylli

pages/about.js

@@ -20,7 +20,7 @@ export default function AboutUs() {
                 experience with version control in a team dynamic was making
                 their integration in a professional environment harder. Most of
                 those new graduates used a version control feature, such as
-                <u>GitHub</u> or <u>Bitbucket</u>, as a repository for their
+                &nbsp;<u>GitHub</u> or <u>Bitbucket</u>, as a repository for their
                 personal projects where they were the only participants. So, all
                 that “branch out and PR review” enriching process was completely
                 unknown to them. That happened to be a problem either for being
@@ -30,7 +30,7 @@ export default function AboutUs() {
               </div>
             }
             rowOrder="row-reverse"
-            image="/images/svg/open-square-bracket.svg"
+            image="/images/svg/square-brackets.svg"
             color={primary}
             bgColor={white}
             customInnerClass="about-content"

public/images/svg/close-square-bracket.svg

@@ -28,19 +28,24 @@
       align-items: center;
       padding: 0px;
       width: 100%;
+      align-items: flex-start;
 
       .inner__content {
+        @include desktop-breakpoint-minus {
+          margin-bottom: 0;
+        }
         .content {
-          margin-top: 0;
           max-width: fit-content;
         }
-        flex-basis: 70%;
+        flex-basis: calc(100% - 24rem);
       }
       .inner__image {
-        flex-basis: 30%;
-        max-height: 25rem;
+        flex-basis: 24rem;
+        height: 24rem;
         .img {
-          object-fit: none;
+          max-width: 24rem;
+          object-fit: contain;
+          transform: scale(0.5);
         }
       }
     }