Update CSS starter example to use module css styling (#103)

basics/assets-metadata-css-starter/styles/Home.module.css

@@ -1,6 +1,10 @@
 .container {
   min-height: 100vh;
-  padding: 1rem 0.5rem 0;
+  padding: 0 0.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .title a {
@@ -24,86 +28,64 @@
   text-align: center;
 }
 
-.heroImage {
-  margin-bottom: 1rem;
+.title,
+.description {
+  text-align: center;
 }
 
-.secondaryHeading {
-  margin: 0 0 1rem;
+
+.description {
+  line-height: 1.5;
+  font-size: 1.5rem;
 }
 
-.input {
-  padding: 0.5rem;
-  width: 300px;
-  margin-bottom: 1rem;
-}
-
-.countries {
-  display: grid;
-  grid-gap: 1rem;
-}
-
-.country {
-  border: 1px solid #000;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-}
-
-.codeSampleBlock {
-  padding: 3rem 0;
-}
-
-.codeSampleBlock p {
-  font-size: 1.3rem;
-  margin-bottom: 1rem;
-}
-
-.footer {
-  width: 100%;
-  height: 100px;
-  border-top: 1px solid #eaeaea;
+.grid {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  max-width: 800px;
+  margin-top: 3rem;
+}
+
+.card {
+  margin: 1rem;
+  flex-basis: 45%;
+  padding: 1.5rem;
+  text-align: left;
+  color: inherit;
+  text-decoration: none;
+  border: 1px solid #eaeaea;
+  border-radius: 10px;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+  color: #0070f3;
+  border-color: #0070f3;
+}
+
+.card h3 {
+  margin: 0 0 1rem 0;
+  font-size: 1.5rem;
+}
+
+.card p {
+  margin: 0;
+  font-size: 1.25rem;
+  line-height: 1.5;
 }
 
 .logo {
-  margin-left: 0.5rem;
-  max-width: 72px;
+  height: 1em;
 }
 
-.footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-@media (min-width: 800px) {
-  .countries {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-@media (min-width: 1024px) {
-  .heroImage {
-    margin: 0 auto 1rem;
-    max-width: 50vw;
-  }
-
-  .secondaryHeading {
-    text-align: center;
-  }
-
-  .input {
-    margin: 0 auto 1rem;
-    display: block;
-  }
-
-  .countries {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-
-  .codeSampleBlock {
-    text-align: center;
+@media (max-width: 600px) {
+  .grid {
+    width: 100%;
+    flex-direction: column;
   }
 }