Card and ThreeColumn container adjustments

Author: mariana-caldas

pages/index.js

@@ -21,7 +21,7 @@ export default function Home() {
 
         <TwoColumn
           title="Let's grow together."
-          image="/images/home-two-column-image.jpg"
+          image="/images/join-us.jpg"
           content="The Web Dev Path is a team of professional developers project that aims to provide a comprehensive path for people who seek to begin their web development journey."
           link="/about-us"
         />
@@ -39,9 +39,9 @@ export default function Home() {
         <ThreeColumn
           titles={['Join us', 'Volunteer', 'Become a mentor']}
           images={[
-            '/images/home-two-column-image.jpg',
-            '/images/home-two-column-image.jpg',
-            '/images/home-two-column-image.jpg',
+            '/images/join-us.jpg',
+            '/images/volunteer.jpg',
+            '/images/mentor.jpg',
           ]}
           altTags={['Join us', 'Volunteer', 'Become a mentor']}
           content={[

public/images/home-two-column-image.jpg renamed to public/images/join-us.jpg

@@ -4,11 +4,11 @@
 .card {
   margin: 1.5rem;
   padding: 1.5rem;
-  border-radius: 1rem;
+  border-radius: 1.5rem;
   box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
-  min-width: 30%;
+  min-width: 28%;
   @include desktop {
-    flex-basis: 30%;
+    flex-basis: 28%;
     margin-bottom: 0;
   }
 

public/images/mentor.jpg

@@ -3,12 +3,12 @@
 
 .container {
   background-color: $white;
+  max-width: $large-desktop-breakpoint;
+  margin: 0 auto;
 
   .inner__content {
     margin: 0 auto;
-    max-width: $large-desktop-breakpoint;
-    padding-bottom: 2.5rem;
-    margin-bottom: 5rem;
+    padding-bottom: 12rem;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;