.course-card{
  @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;
  }
}
