#courses-view
  h1
    margin-bottom: 30px
    
  #main-content
    max-width: 720px
    margin: 0 auto

  #play-now-to-learn-header
    margin-top: 60px

  #benefits-ul
    margin: 0 auto 40px
    width: 360px

  hr
    border-top: 1px solid grey
    margin: 5px 0

  .text-uppercase
    margin-top: 40px

  #just-added-text
    color: #009999

  .just-added
    border: 1px solid #009999
    margin: 0 -20px
    padding: 0 20px

  .course-instance-entry
    padding-left: 40px

    .progress-bar
      min-width: 15%

    .btn
      margin-left: 20px
      min-width: 180px

  #join-class-form
    .alert, .progress
      margin-top: 20px

  // Hero display
  .current-hero-container
    display: flex
    justify-content: center

    .current-hero-text
      font-size: 16pt

    .hero-avatar
      background-color: #f8f8f8
      box-shadow: 0 0 0 1px gray
      margin-right: 25px

    .current-hero-right-col
      display: flex
      flex-direction: column
      justify-content: space-between
      align-items: flex-start