service page responsive

website/src/pages/service/service.scss

@@ -22,7 +22,7 @@
             }
 
             &.img-right {
-                grid-template-columns: 300px auto;
+                grid-template-columns: auto 300px;
 
                 img {
                     grid-column: 2;
@@ -40,9 +40,10 @@
             .mail-icon {
                 font-size: 40px;
                 position: relative;
-                top: 2px;
+                color: $light_0;
             }
 
+
             .contact-button {
                 display: flex;
                 align-items: center;
@@ -100,7 +101,7 @@
                         }
 
                         &::before {
-                            content: "\1F7E2\0020"; // A green spot and a space
+                            content: "⚙️\0020"; // A gear and a space
                             vertical-align: middle;
                         }
                     }
@@ -152,6 +153,85 @@
                     }
                 }
             }
+
+            @media screen and (max-width:$screen_m) {
+                gap: 20px;
+                padding: 20px;
+
+                &:not(:first-child) {
+                    margin-top: 40px;
+                }
+
+                img {
+                    width: 200px;
+                    height: auto;
+                    max-width: 100%;
+                    grid-row: 1;
+                    grid-column: 1;
+                    margin: 0 auto;
+                }
+
+                &.img-left,
+                &.img-right {
+                    grid-template-columns: 1fr;
+
+                    img {
+                        grid-row: 1;
+                        grid-column: 1;
+                    }
+                }
+
+                .mail-icon {
+                    font-size: 30px;
+                }
+
+                .contact-button {
+                    .btn-text {
+                        font-size: 20px;
+                    }
+                }
+
+                h3 {
+                    color: $blue_2;
+                    font-size: 22px;
+                }
+
+                .section-data {
+                    min-height: unset;
+
+                    p {
+                        max-width: unset;
+                    }
+                }
+
+                &.techno {
+                    &>ul {
+                        grid-template-columns: 1fr;
+                        gap: 25px;
+
+                        li {
+                            grid-template-columns: 80px auto;
+
+                            img {
+                                width: 80px;
+                                height: 80px;
+                            }
+
+                            .tech-txt {
+
+                                h4 {
+                                    font-size: 17px;
+                                }
+
+                                p {
+                                    max-width: unset;
+                                }
+                            }
+
+                        }
+                    }
+                }
+            }
         }
     }
 }
\ No newline at end of file