Test new about responsive

index.html

@@ -62,13 +62,10 @@ <h1 id="headerTitle" class="header-title">RecyTech</h1>
             </div>
         </section>
         <section id="about" class="main-section about">
-            <div class="about-icon-wrapper">
-                <img class="about-icon" src="./images/leaf.png" alt="Icône RecyTech">
-            </div>
             <div class="about-text-content">
                 <h2 class="about-title">À propos</h2>
                 <p class="about-text">
-                    Nous sommes un groupe d'étudiants en informatique, et notre projet consiste à récupérer des pièces d'ordinateurs usagées auprès des écoles de la région, les restaurer et les revendre à prix abordables.
+                    Nous sommes un groupe d'étudiants en informatique, notre projet consiste à récupérer des pièces d'ordinateurs usagées auprès des écoles de la région, de les restaurer et de les revendre à prix abordables.
                     Nous proposons également des PC complets, réassemblés et remis à neuf, avec un choix de distributions Linux adaptées à différents besoins.
                 </p>
                 <p class="about-text">

styles/about.css

@@ -1,5 +1,6 @@
 .about {
     display: flex;
+    position: relative;
     align-items: center;
     justify-content: space-between;
     height: calc(100vh - var(--header-height));
@@ -9,19 +10,6 @@
     height: 100vh;
 }
 
-.about-icon-wrapper {
-    position: absolute;
-    top: 50px;
-    left: 50px;
-    transform: scale(2);
-    overflow: hidden;
-}
-
-.about-icon {
-    width: 80px;
-    height: auto;
-}
-
 .about-text-content {
     flex: 1;
     max-width: 50%;
@@ -56,4 +44,22 @@
     width: 100%;
     height: auto;
     border-radius: var(--border-radius);
+    box-shadow: 10px 10px 0px 0px var(--primary-color);
 }
+
+@media screen and (max-width: 990px) {
+    .about-image-content {
+        display: none;
+    }
+
+    .about-text-content {
+        flex: auto;
+        max-width: 100%;
+    }
+}
+
+@media screen and (max-width: 500px) {
+    .about-text {
+        font-size: 15px;
+    }
+}