media queries for responsiveness

components/HomeSection.js

@@ -23,8 +23,10 @@ export default function HomeSection(props) {
           />
           <Avatar size={"big"} />
 
+          <div className={styles.infosHolder}>
             <Infos infos={person.infos} />
           </div>
+        </div>
 
         <div className={styles.buttonContainer}>
           <Button

components/modules/CaseSection.module.css

@@ -28,7 +28,28 @@
 }
 
 @media screen and (max-width: 1440px) {
+  .content {
+    padding: 2rem;
+  }
+
   .cardRow {
     flex-direction: column;
   }
+
+  .title {
+    margin-bottom: 2rem;
+  }
+}
+
+@media screen and (max-width: 840px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .infosHolder {
+    margin: 2rem auto 8rem auto;
+  }
 }

components/modules/HomeSection.module.css

@@ -27,7 +27,7 @@
   width: 1.25rem;
   height: 1.25rem;
 
-  margin: 1rem auto;
+  margin: 1rem auto 0 auto;
 }
 
 .buttonContainer {
@@ -42,3 +42,20 @@
   align-content: center;
   justify-content: center;
 }
+
+@media screen and (max-width: 840px) {
+  .bg {
+    display: none;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .infosHolder {
+    margin: 2rem auto 8rem auto;
+  }
+}

styles/global.css

@@ -34,6 +34,7 @@ body {
 .wrapper {
   position: relative;
   height: 100vh;
+  min-height: 100vh;
 }
 
 h1 {