restyle global layout and course cards

assets/stylesheets/base/typography.css

@@ -1,5 +1,5 @@
 h1, h2, h3, h4, h5, h6 {
-  font-family: 'robotomedium', 'Arial Black', sans-serif;
+  font-family: var(--font-medium);
   font-weight: normal;
   line-height: 1.31;
   color: var(--color-text-headlines);

assets/stylesheets/course/card.css

@@ -16,12 +16,12 @@
     display: inline-block;
     color: var(--color-text-grey);
     font-size: 0.75em;
-    letter-spacing: 2px;
+    font-family: var(--font-medium);
 
     &:after {
-      content: '/';
+      content: ' • ';
       display: inline-block;
-      padding: 0 0.3em;
+      padding: 0 0.5em;
     }
 
     &:last-child:after {
@@ -29,6 +29,11 @@
     }
   }
 
+  @element category-link {
+    display: inline-block;
+    letter-spacing: 2px;
+  }
+
   @element title {
     flex: 0 1 12vh;
     max-height: 120px;
@@ -68,5 +73,10 @@
     font-size: 0.75em;
     line-height: 2.17;
     letter-spacing: 2px;
+
+    &:hover {
+      color: var(--color-link-content-hover);
+      border-bottom-color: var(--color-link-content-hover);
+    }
   }
 }

assets/stylesheets/global/index.css

@@ -13,19 +13,20 @@ body {
   line-height: var(--line-height);
 }
 
-#main {
+@block main {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-}
-#main__header {
-  flex: 0 0 auto;
-}
-#main__content {
-  flex: 1 0 auto;
-  display: flex;
-  align-items: stretch;
-}
-#main__footer {
-  flex: 0 0 auto;
+
+  @element header {
+    flex: 0 0 auto;
+  }
+  @element content {
+    flex: 1 0 auto;
+    display: flex;
+    align-items: stretch;
+  }
+  @element footer {
+    flex: 0 0 auto;
+  }
 }