ECOM-4218 Draft 2 to add course card styles (#12593)

ECOM-4218 Draft 2 to add course card styles

lms/static/sass/elements/_course-card.scss

@@ -1,8 +1,53 @@
-.header-img{
-  @include float(left);
-  margin-right:20px;
-}
 .course-card{
-  height: 250px;
-  margin-top:20px;
+  @include span(10);
+  margin-left: $baseline*2 + px;
+  margin-bottom: $baseline + px;
+  .course-image-link{
+    @include float(left);
+    .header-img{
+      max-width: 191px;
+    }
+  }
+  .course-details{
+    @include float(right);
+    width: 100%;
+    @include susy-media($bp-screen-sm) { width: calc(100% - 191px); }
+    padding-left: $baseline*1.5 + px;
+    .course-title{
+      font-size: font-size(x-large);
+      font-weight: font-weight(normal);
+      margin-bottom: $baseline/4 + px;
+    }
+    .course-text{
+      color: palette(grayscale, dark);
+    }
+  }
+  .course-actions{
+    .enrollment-info{
+      width: $baseline*10 + px;
+      text-align: center;
+      margin-bottom: $baseline/2 + px;
+      text-transform: uppercase;
+    }
+    .enroll-button{
+      width: $baseline*10 + px;
+      text-align: center;
+      background-color: palette(success, dark);
+      border-color: palette(success, dark);
+      &:hover,
+      &:focus{
+        background-color: palette(success, base);
+        border-color: palette(success, base);
+      }
+    }
+
+    .view-course-link{
+      width: $baseline*10 + px;
+      text-align: center;
+    }
+  }
+
+  .action-msg-view{
+    clear: both;
+  }
 }