download chapters in program page

.css

/* -------------------- DOWNLOAD BLOCK -------------------- */
.download-block {
	    padding: 10px 20px;
    background-color: #363f4b;
    margin-top: 20px;
    color: #fff;
}
.download-block__title {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 15px;
  font-size: 1.5rem;
  margin-bottom: 15px;
}
.download-block__list a {
	display: block;
  font-family: Lato,Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  position: relative;
  display: block;
  height: 3.42rem;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  outline: none;
  color: #fff;
  -webkit-transition: color .2s;
  -o-transition: color .2s;
  transition: color .2s;
}

.download-block__list a:hover, .download-block__list a:focus {
	color: #4caf50;
}

/* -------------------- DOWNLOAD BLOCK -------------------- */

.liquid

 <div class="container">
  <div class="col-sm-4 col-sm-offset-8">
    {% if program.available_to_current_user? or program.free_chapters? %}
      <div class="download-block">
        <ul class=".download-block__list">
          <div class="download-block__title">Download Files</div>
          {% for group in program.chapter_groups %}
            {% for chapter in group.chapters %}
              {% if chapter.subject_type == "video" %}
                <a download href="{{chapter.subject.download_url}}"><i class="fa fa-download" aria-hidden="true"></i> {{chapter.title}}</a>
              {% endif %}
            {% endfor %}
          {% endfor %}
        </ul>
      </div>
    {% endif %}
  </div>
</div>