styles/responsive.css

@@ -3,4 +3,79 @@
     * {
         font-size: 1.13em;
     }
+}
+
+/* Adicionando responsividade para celulares */
+@media (max-width: 425px) {
+    /* Banner principal da pagina */
+    main .banner-container .banner-desktop{
+        display: none;
+    }
+    main .banner-container .banner-mobile{
+        display: block;
+    }
+
+    /* Titulo e descricao do site */
+    main section.container-description{
+        padding: 73px 0 90px;
+        gap: 24px;
+    }
+    main section.container-description .description-text h2.description-title{
+        font-size: 1.25rem;
+    }
+    main section.container-description .description-text h2.description-title span.description-subtitle{
+        font-size: 1.75rem;
+    }
+    main section.container-description .description-text p.description{
+        width: 86%;
+        padding: 16px 0 65px;
+    }
+    main section.container-description .description-text p.description .image-description{
+        width: 58%;
+    }
+
+    /* Container com tres imagens */
+    main .container-three-images {
+        margin-bottom: 112px;
+    }
+    main .container-three-images .three-images-wrapper {
+        gap: 3%;
+        padding: 0 23px;
+        top: 41px;
+    }
+    main .container-three-images .three-images-wrapper figure:nth-child(1),
+    main .container-three-images .three-images-wrapper figure:nth-child(2) {
+        display: flex;
+        width: 48.1%;
+        padding-bottom: 9px;
+    }
+
+    /* Artigo da pagina */
+    main article.container-article{
+        align-items: unset;
+        padding: 98px 0px 87px;
+    }
+    main article.container-article .article-text{
+        padding: 0 32px;
+    }
+    main article.container-article figure.article-image-mobile{
+        display: block; 
+        padding-bottom: 50px;
+    }
+    main article.container-article figure.article-image-desktop{
+        display: none; 
+    }
+    main article.container-article .article-text h3.article-title{
+        font-size: 1.5em;
+    }
+    main article.container-article .article-text p.article-description{
+        padding-top: 9px;
+        width: 100%;
+    }
+
+    /* Footer da pagina */
+    footer span.footer-description{
+        text-align: center;
+        width: 69%;
+    }
 }