diff --git a/styles/responsive.css b/styles/responsive.css index 817fe2c..bb990ed 100644 --- a/styles/responsive.css +++ b/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%; + } } \ No newline at end of file