Add Reusable grid css for the next steps or the future :D.

Author: quechau

starter/07-Omnifood-Desktop/content/css/style.css

@@ -61,6 +61,31 @@ body {
 /***************************/
 /* GENERAL REUSABLE COMPONENTS */
 /***************************/
+
+.container {
+  /* 1140px */
+  max-width: 120rem;
+  padding: 0 3.2rem;
+  margin: 0 auto;
+}
+
+.grid {
+  display: grid;
+  gap: 9.6rem;
+}
+
+.grid--2-cols {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.grid--3-cols {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.grid--4-cols {
+  grid-template-columns: repeat(4, 1fr);
+}
+
 .heading-primary {
   font-size: 5.2rem;
   font-weight: 600;
@@ -232,3 +257,11 @@ body {
   color: #cf711f;
   font-weight: 700;
 }
+
+/***************************/
+/* HOW IT WORKS SECTION */
+/***************************/
+.section-how {
+  padding: 9.6rem 0;
+  background-color: orangered;
+}

starter/07-Omnifood-Desktop/content/index.html

@@ -68,6 +68,14 @@ <h1 class="heading-primary">
           </div>
         </div>
       </section>
+      <section class="section-how">
+        <div class="container grid grid--2-cols">
+          <div>Test 1</div>
+          <div>Test 2</div>
+          <div>Test 3</div>
+          <div>Test 4</div>
+        </div>
+      </section>
     </main>
   </body>
 </html>