reorganise css files

assets/stylesheets/course/card.css

@@ -0,0 +1,53 @@
+@block course-card {
+  display: flex;
+  flex-direction: column;
+  min-height: 30vh;
+  padding: var(--grid-gutter);
+
+  border-radius: var(--border-radius);
+  box-shadow: var(--card-box-shadow);
+
+  & > * + * {
+    margin-top: var(--grid-gutter);
+  }
+
+  @element categories{
+    flex: 0 0 var(--line-height);
+  }
+
+  @element category{
+    display: inline-block;
+    margin-right: var(--grid-gutter);
+    color: var(--color-text-grey);
+    font-size: 0.75em;
+    letter-spacing: 2px;
+  }
+
+  @element title {
+    flex: 1 1 auto;
+    margin-bottom: 0;
+  }
+
+  @element description-wrapper {
+    flex: 1 1 auto;
+
+    & p {
+      margin: 0;
+    }
+  }
+
+  @element link-wrapper {
+    flex: 0 0 auto;
+  }
+
+  @element link {
+    display: inline-block;
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid var(--color-link-content);
+    text-transform: uppercase;
+    color: var(--color-link-content);
+    font-size: 0.75em;
+    line-height: 2.17;
+    letter-spacing: 2px;
+  }
+}

assets/stylesheets/course/index.css

@@ -0,0 +1 @@
+@include './card'