Deleting Layout.module.css file, creating a Layout.module.scss file containing styles in SASS format and referencing to the scss file in Layout component

Author: ZahraB21

components/Layout.js

@@ -1,5 +1,5 @@
 import Nav from "./Nav";
-import styles from "../styles/Layout.module.css";
+import styles from "../styles/Layout.module.scss";
 import Footer from "./Footer";
 
 export default function Layout({ children }) {

styles/Layout.module.css

@@ -0,0 +1,16 @@
+.container {
+    min-height: 100vh;
+    padding: 0 0.5rem;
+    width: 100%;
+    margin: 0 auto;
+}
+
+.main {
+    padding: 3rem 0;
+}
+
+@media (min-width: 1024px) {
+    .container {
+        width: 80%;
+    }
+}