Add sass && grid

assets/css/style.css

 html {
-    font-size: 16px;
+  font-size: 16px;
 }
 
 body {
-    margin: 0;
+  margin: 0;
 }
 
 header nav {
-    width: 100vw;
-    background-color: #121212;
-    height: 60px;
+  width: 100vw;
+  background-color: #121212;
+  height: 60px;
 }
-
 header nav ul {
-    display: flex;
-    margin: 0;
-    padding: 0;
-    justify-content: flex-end;
-    align-items: center;
-    height: 100%;
-    gap: 1rem;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  justify-content: flex-end;
+  align-items: center;
+  height: 100%;
+  gap: 1rem;
 }
-
 header nav ul li {
-    list-style: none;
+  list-style: none;
 }
-
 header nav ul li a {
-    color: white;
+  color: white;
 }
 
 section {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+  display: grid;
+  grid-template-columns: 1fr;
+  justify-items: center;
+  align-items: center;
+  gap: 16px;
+}
+@media all and (min-width: 768px) {
+  section {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media all and (min-width: 920px) {
+  section {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
-
 section article {
-    width: 100px;
-    height: 200px;
-    border: 1px solid black;
-    border-radius: 5px;
+  width: 100px;
+  height: 200px;
+  border: 1px solid black;
+  border-radius: 5px;
 }
+
+/*# sourceMappingURL=style.css.map */

assets/css/style.css.map

+{"version":3,"sourceRoot":"","sources":["../scss/style.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;;;AAIA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;;AASV;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI;;;AAGF;EAXF;IAYI;;;AAGF;EACE;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file

assets/scss/style.scss

+html {
+  font-size: 16px;
+}
+
+body {
+  margin: 0;
+}
+
+header {
+  nav {
+    width: 100vw;
+    background-color: #121212;
+    height: 60px;
+
+    ul {
+      display: flex;
+      margin: 0;
+      padding: 0;
+      justify-content: flex-end;
+      align-items: center;
+      height: 100%;
+      gap: 1rem;
+
+      li {
+        list-style: none;
+
+        a {
+          color: white;
+        }
+      }
+    }
+  }
+}
+
+$sm:  768px;
+$md: 920px;
+section {
+  display: grid;
+  grid-template-columns: 1fr;
+  justify-items: center;
+  align-items: center;
+  gap: 16px;
+
+  @media all and (min-width: $sm) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media all and (min-width: $md) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  article {
+    width: 100px;
+    height: 200px;
+    border: 1px solid black;
+    border-radius: 5px;
+  }
+}

assets/style.css

+html {
+    font-size: 16px;
+}
+
+body {
+    margin: 0;
+}
+
+header nav {
+    width: 100vw;
+    background-color: #121212;
+    height: 60px;
+}
+
+header nav ul {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    justify-content: flex-end;
+    align-items: center;
+    height: 100%;
+    gap: 1rem;
+}
+
+header nav ul li {
+    list-style: none;
+}
+
+header nav ul li a {
+    color: white;
+}
+
+section {
+    display: grid;
+    grid-template-columns: 1fr;
+    justify-items: center;
+    align-items: center;
+    gap: 16px;
+}
+
+@media all and (min-width: 768px){
+    section {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media all and (min-width: 920px){
+    section {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+section article {
+    width: 100px;
+    height: 200px;
+    border: 1px solid black;
+    border-radius: 5px;
+}