added yellow section css below about-us

Author: klezi10

pages/about.js

@@ -2,13 +2,13 @@ import RevealContentContainer from '@/components/containers/RevealContentContain
 // import Title from '@/components/snippets/Title';
 import TwoColumn from '@/components/containers/TwoColumn';
 import { white, primary, primaryAccent } from '@/styles/TwoColumn.module.scss';
-import Container from '@/components/containers/Container';
+// import Container from '@/components/containers/Container';
 
 export default function AboutUs() {
   return (
     <div className='about-us'>
       <RevealContentContainer>
-        {/* ================================OUR BACKGROUND SECTION============== */}
+        {/* ================================FIRST ABOUT SECTION============== */}
         {/* <Container> */}
         {/* <Title title='Our background' /> */}
         <TwoColumn
@@ -32,11 +32,10 @@ export default function AboutUs() {
           customInnerClass='our-background'
         />
         {/* </Container> */}
-        {/* ================================OUR BACKGROUND SECTION============== */}
       </RevealContentContainer>
 
       <RevealContentContainer>
-        <Container>
+        {/* <Container> */}
           {/* <Title title='Peer reviews' /> */}
           <TwoColumn
             title='Peer reviews'
@@ -96,9 +95,11 @@ export default function AboutUs() {
             bgColor={white}
             customInnerClass='about-content'
           />
-        </Container>
+        {/* </Container> */}
       </RevealContentContainer>
 
+       {/* ================================FIRST ABOUT SECTION============== */}
+
       {/* <RevealContentContainer>
         <Container>
           <Title title="Our goals" />

styles/TwoColumn.module.scss

@@ -25,40 +25,11 @@
       }
     }
 
-    //bracket img needs to be made smaller for mobile
-
-    //added============================
-    &.our-background {
-      padding-bottom: 0;
-      .inner__content {
-        // @include desktop-breakpoint-minus {
-        //   margin-bottom: 0;
-        // }
-        .content {
-          max-width: fit-content;
-        }
-        flex-basis: calc(100% - 34rem);
-      }
-
-      .inner__image {
-        flex-basis: 30rem;
-        // height: 24rem;
-        .img {
-          max-width: 24rem;
-          object-fit: contain;
-          transform: scale(0.65);
-        }
-      }
-      
-    }
-
-    //added============================
-
     &.about-content {
-      align-items: center;
-      padding: 0px;
-      width: 100%;
-      align-items: flex-start;
+      // align-items: center;
+      // padding: 0px;
+      // width: 100%;
+      // align-items: flex-start;
 
       .inner__content {
         @include desktop-breakpoint-minus {
@@ -67,11 +38,12 @@
         .content {
           max-width: fit-content;
         }
-        flex-basis: calc(100% - 24rem);
+        flex-basis: calc(100% - 34rem); 
       }
       .inner__image {
         flex-basis: 24rem;
         height: 24rem;
+        transform: translateY(15%);
         .img {
           max-width: 24rem;
           object-fit: contain;
@@ -127,6 +99,35 @@
       }
     }
 
+     //added============================
+     &.our-background {
+      padding-bottom: 0;
+      .inner__content {
+        @include desktop-breakpoint-minus {
+          margin-bottom: 0;
+        }
+        .content {
+          max-width: fit-content;
+        }
+        flex-basis: calc(100% - 34rem);
+      }
+
+      .inner__image {
+        flex-basis: 30rem;
+        // height: 24rem;
+
+        
+        .img {
+          max-width: 50rem;
+          object-fit: contain;
+          transform: scale(0.5) translateY(-17%);
+        }
+      }
+      
+    }
+
+    //added============================
+
     @include desktop {
       display: flex;
       justify-content: space-between;