ajustando o conteudo do card

index.html

@@ -42,9 +42,15 @@
         <img src="assets/images/Image 01.png" alt="">
       </div>
 
-      <div class="grid grid-cols-2">
+      <figure class="grid grid-cols-2">
         <img src="assets/images/Image 02.png" alt="">
-      </div>
+        <figcaption>
+          <span class="content-tag">ROBÓTICA</span>
+          <h2 class="text-2xl">
+            Robôs domésticos começam a ser adotados para tarefas diárias, prometendo mais conforto e eficiência nas residências.
+          </h2>
+        </figcaption>
+      </figure>
 
       <div>
         <img src="assets/images/Image 03.png" alt="">

styles/global.css

@@ -16,7 +16,7 @@
   --h2: 800 16px/140% var(--font-family);
   --h3: 800 14px/140% var(--font-family);
   --text-span: 600 14px/145% var(--font-family);
-  --text: 400 16px/140% var(--font-family)
+  --text: 400 16px/140% var(--font-family);
   --text-sm: 400 14px/160% var(--font-family);
 }
 
@@ -54,5 +54,17 @@ img {
 }
 main {
   margin-top: 40px;
-
+
+}
+.content-tag {
+  display: inline-block;
+  background-color: var(--brand-color-dark);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font: 500 10px/1.2 var(--font-family);
+  text-transform: uppercase;
+  letter-spacing: 0.4em;
+  color: var(--text-color-primary);
+  box-shadow: 0px 4px 16px  rgba(2, 6, 23, 0.251);
+
 }

styles/sections.css

@@ -4,4 +4,25 @@
     object-fit: cover;
     border-radius: 4px;
   }
+  .card {
+    &::berofe {
+      position: absolute;
+      inset: 0;
+      top: 50%;
+      background: linear-gradient(
+        180deg, transparent 0%,
+        #020617 100%
+      );
+    }
+    figcaption {
+      position: absolute;
+      bottom: 0;
+
+      padding: 24px;
+
+      h2 {
+        margin-top: 8px;
+      }
+    }
+  }
 }

styles/utility.css

@@ -12,4 +12,17 @@
 }
 .gap-16 {
   gap: 16px;
+}
+
+.text-2xl {
+  font: var(--h1);
+}
+.text-xl {
+  font: var(--h2);
+}
+.text-lg {
+  font: var(--h3);
+}
+.text-sm {
+  font: var(--text-sm);
 }