styled course card component

Author: hmillersarah

web-components/course-card/course-card.css

@@ -0,0 +1,54 @@
+h2 {
+    font-weight: 500;
+    font-size: 1.5em;
+    padding: 0em;
+    margin: 0em;
+}
+
+p {
+    font-size: 1.125em;
+}
+
+a {
+    text-decoration: none;
+    color: #0f62fe;
+}
+
+img {
+    max-width: 16em;
+}
+
+/* Styling for a link group */
+.link-g {
+    margin-top: 1.4em;
+}
+
+/* Styling for inline group (level, time) */
+.inline-g {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 1em;
+}
+
+.inline-g p {
+    padding: 0em;
+    margin: 0em;
+}
+
+/* Styling for course card */
+.course-card {
+    margin: 1em 0em;
+    padding: 2em 0em;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+    gap: 2em;
+    border-bottom: 2px dotted lightgray;
+}
+
+/* 1024px and above screen sizes */
+@media screen and (min-width: 64em) {
+    .course-card {
+        flex-flow: row nowrap;
+    }
+}

web-components/course-card/course-card.html

@@ -1,20 +1,22 @@
 <!-- HTML template -->
-<link href="" rel="stylesheet">
+<link href="web-components/course-card/course-card.css" rel="stylesheet">
 <div class="course-card">
     <div>
         <img class="course-img" src="">
     </div>
     <div>
-        <h2 class="course-name"></h2>
-        <p class="course-desc"></p>
-        <div class="inline-g">
-            <p><b>Level: </b><span class="course-level"></span></p>
-            <p><b>Cost: </b><span class="course-cost"></span></p>
-            <p><b>Badge: </b><span class="course-badge"></span></p>
-            <p><b>Time: </b><span class="course-time"></span></p>
+        <div>
+            <h2 class="course-name"></h2>
+            <p class="course-desc"></p>
+            <div class="inline-g">
+                <p><b>Level: </b><span class="course-level"></span></p>
+                <p><b>Cost: </b><span class="course-cost"></span></p>
+                <p><b>Badge: </b><span class="course-badge"></span></p>
+                <p><b>Time: </b><span class="course-time"></span></p>
+            </div>
+        </div>
+        <div class="link-g">
+            <a class="course-link" target="_blank" rel="noopener noreferrer">Learn more →</a>
         </div>
-    </div>
-    <div class="link-g">
-        <a class="course-link" target="_blank" rel="noopener noreferrer">Learn more →</a>
     </div>
 </div>

web-components/video-card/video-card.css

@@ -1,14 +1,3 @@
-:root {
-    /* Color */
-    --blue: #0f62fe;
-        /* Background Color */
-        --bg-light-gray: #f4f4f4;
-
-    /* Sizing */
-    --plex-18: 1.125em;
-    --plex-24: 1.5em; 
-}
-
 h2 {
     font-weight: 400;
     font-size: var(--plex-24);