Finish my-challenges css above mobile

Author: Nick Litwin

app/my-dashboard/my-challenges/my-challenges.jade

@@ -4,7 +4,7 @@ header(ng-hide="vm.loading")
 .section-loading(ng-show="vm.loading")
 
 section.noChallenges(ng-if="!vm.userHasChallenges && !vm.loading")
-  h3 Prove your skills
+  h3 Prove your skills!
 
   .tracks
     .track
@@ -19,6 +19,10 @@ section.noChallenges(ng-if="!vm.userHasChallenges && !vm.loading")
       .data-science-icon-outline
       p Data Science
 
+    .track
+      .copilot-icon-outline
+      p Co-Pilot
+
   p.info Hey, whatever your like might be—Design, Development, or Data Science—we have it! Explore the Challenges section and show us what you’re made of!
 
   a(ng-href="https://www.{{DOMAIN}}/challenges/") View Challenges

assets/css/my-dashboard/my-challenges.scss

@@ -3,6 +3,10 @@
 .my-challenges {
   .section-title {
     margin-bottom: 27px;
+    @media only screen and (min-width: 900px) {
+      font-size: 28px;
+      margin-bottom: 60px;
+    }
   }
 
   .section-loading {
@@ -14,26 +18,42 @@
     flex-direction: column;
     align-items: center;
     color: #3D3D3D;
+    padding-left: 20px;
+    padding-right: 20px;
 
     h3 {
       margin-bottom: 20px;
       @include sofia-pro-extra-light;
       font-size: 18px;
       text-transform: uppercase;
+      @media only screen and (min-width: 900px) {
+        font-size: 28px;
+        margin-bottom: 30px;
+      }
     }
 
     .tracks {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
-      width: 260px;
+      min-width: 260px;
+      @media only screen and (min-width: 450px) {
+        min-width: 350px;
+      }
 
       .track {
         div:first-child {
           margin: 0 auto 10px;
           @include background-image-size(44px, 43px);
         }
 
+        &:last-child {
+          display: none;
+          @media only screen and (min-width: 450px) {
+            display: block;
+          }
+        }
+
         p {
           @include sofia-pro-medium;
           font-size: 12px;
@@ -49,22 +69,36 @@
       .data-science-icon-outline {
         @include data-icon-outline;
       }
+      .copilot-icon-outline {
+        @include copilot-icon-outline;
+      }
     }
 
     .info {
-      width: 260px;
+      max-width: 650px;
       margin-top: 50px;
       @include sofia-pro-light;
-      font-size: 15.4px;
+      font-size: 15px;
       line-height: 22.4px;
       text-align: center;
+      @media only screen and (min-width: 900px) {
+        max-width: 856px;
+        margin-top: 90px;
+        font-size: 22px;
+        line-height: 32px;
+      }
     }
 
     a {
       margin-top: 20px;
       margin-bottom: 40px;
       @include button-l;
       text-decoration: none;
+      @media only screen and (min-width: 900px) {
+        @include button-xl;
+        margin-top: 30px;
+        margin-bottom: 90px;
+      }
     }
   }
 

assets/css/my-dashboard/my-dashboard.scss

@@ -16,12 +16,6 @@
     width: 100%;
   }
 
-  .programs {
-    @media only screen and (max-width: 450px) {
-      padding-top: 10px;
-    }
-  }
-
   .section-title {
     @include sofia-pro-bold;
     font-size: 22px;

assets/css/my-dashboard/programs.scss

@@ -16,6 +16,9 @@
     flex-direction: column;
     align-items: center;
     width: 300px;
+    @media only screen and (max-width: 450px) {
+      padding-top: 10px;
+    }
 
     img {
       width: 100%;

assets/css/partials/_mixins.scss

@@ -204,17 +204,23 @@
 
 @mixin develop-icon-outline {
   background-image: url(/images/ico-track-develop-outline.svg);
+  background-repeat: no-repeat;
 }
 
 @mixin design-icon-outline {
   background-image: url(/images/ico-track-design-outline.svg);
+  background-repeat: no-repeat;
 }
 
 @mixin data-icon-outline {
   background-image: url(/images/ico-track-data-outline.svg);
+  background-repeat: no-repeat;
 }
 
-
+@mixin copilot-icon-outline {
+  background-image: url(/images/ico-track-co_pilot-outline.svg);
+  background-repeat: no-repeat;
+}
 
 // UI REFRESH STYLES
 @mixin ui-submit-button {