feat(items.css): estiliza os itens renderizados

styles/forms.css

@@ -1,3 +1,7 @@
+.shopping-form{
+    margin-bottom: 32px;
+}
+
 .shopping-form-inputs {
     display: flex;
     align-items: flex-end; /*itens alinhados pela base de baixo*/

styles/items.css

@@ -0,0 +1,22 @@
+.shopping-result{
+    max-width: 416px;
+}
+
+.shopping-result-head,
+.shopping-item{
+    display: grid;
+    grid-template-columns: 3fr 1fr; /*de todo espaço disponivel, vai separa em 4 partes, sendo 3 partes pro primeiro e 1 pro segundo*/
+    padding: 8px 16px;
+}
+
+.shopping-result-head{
+    background: var(--gray-100);
+}
+
+.shopping-items{
+    list-style: none;
+}
+
+.shopping-item:nth-child(even){ /*cada shopping item que seja um elemento par vai receber backgroud*/
+    background: var(--gray-100);
+}

styles/main.css

@@ -1,6 +1,7 @@
 @import "global.css";
 @import "variables.css";
 @import "forms.css";
+@import "items.css";
 
 .shopping-container{
     max-width: 1200px;