created section vagas

index.html

@@ -57,6 +57,12 @@ <h2>Reviews 5 estrelas</h2>
         <p>Estamos orgulhosos de contar com mais de 500 reviews 5 estrelas em nossos produtos.</p>
       </div>
     </section>
+    <section id="vagas">
+      <span>Vagas abertas!</span>
+      <h2>Estamos procurando por talentos</h2>
+      <p>Somos uma equipe 100% remota com pessoas do Brasil inteiro.</p>
+      <img src="assets/Image.png" alt="Imagem de pessoas sentadas na mesa, cada uma com um Notebook.">
+    </section>
   </main>
 </body>
 </html>

styles.css

@@ -85,13 +85,13 @@ header {
 }
 
 #sobre_nos span {
-  color: #8E2424;
+  color: var(--color-primary);
   font-weight: 600;
   line-height: 24px;
 }
 
 #sobre_nos h1 {
-  color: #101828;
+  color: var(--color-text-secondary);
   font-size: 48px;
   font-weight: 600;
   line-height: 60px;
@@ -136,4 +136,40 @@ header {
 .metricas_card > p {
   color: var(--color-secondary);
   line-height: 24px;
+}
+
+#vagas {
+  display: flex;
+  padding: 96px 0px;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+#vagas > span {
+  color: var(--color-primary);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+
+  padding: 4px 12px;
+  border-radius: 16px;
+  background: rgba(142, 36, 36, 0.05);
+}
+
+#vagas > h2 {
+  color: var(--color-text-secondary);
+  font-size: 36px;
+  font-weight: 600;
+  letter-spacing: -0.72px;
+}
+
+#vagas > p {
+  color: var(--color-secondary);
+  font-size: 20px;
+  line-height: 30px;
+}
+
+#vagas > img {
+  margin-top: 44px;
 }