{% include "header" %}
<main class="course">
  <div class="course-header">
    <div class="course-header-title">
      {{ course.name }}
    </div>
    {% unless course.properties.subtitle contains 'missing property' %}
      <div class="course-header-subtitle">
        {{ course.properties.subtitle }}
      </div>
    {% endunless %}
  </div>
  <div class="container">
    <div class="course-content row">
      <div class="course-content-left col-md-6">
          <img
            src="{{ course.image_url }}"
            alt="{{ course.name }}"
            class="course-content-left-image"
          />
        <div class="course-content-left-description-title">
          About the Module
        </div>
        <div class="course-content-left-description">
          {{ course.full_description }}
        </div>
        {% if course.categories.any? %}
          <div class="course-content-left-categories">
            {% include "course_categories" %}
          </div>
        {% endif %}
        {% if course.instructors.any? %}
          <div class="course-content-left-instructors">
            {% include "course_instructors" %}
          </div>
        {% endif %}
        {% if course.events.any? %}
          <div class="course-content-left-events">
            {% include "course_events" %}
          </div>
        {% endif %}
      </div>
      <div class="course-content-right col-md-6">
        <div class="course-content-right-cta">
          {% include "course_progress_and_cta" %}
        </div>
        <div class="course-content-right-outline">
          {% include "course_outline" %}
        </div>
      </div>
    </div>
  </div>
</main>

<style>
  .course-header{
    text-align: center;
    margin: 40px 0 100px;
  }
  .course-header-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.1rem;
    font-weight: 500;
    margin-bottom: 10px;
  }
  .course-header-subtitle {
    font-size: 1.5rem;
    font-weight: 400;
  }
  .container {
    max-width: 1440px;
    width: 90%;
  }
  .course-content {
    margin: 40px 5%;
  }
  .course-content-left-image {
    width: 100%;
    margin-bottom: 20px;
  }
  .course-content-left-description-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.25rem;
    font-weight: 500;
    margin-bottom: 20px;
  }
  .course-content-left-description {
    font-weight: 300;
  }
  .course-content-right-cta {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
  }
  @media screen and (max-width: 768px) {
    .course-content-right {
      margin-top: 60px;
    }
    .course-button {
      margin: auto;
    }
    .progress-text {
      margin: 20px auto;
    }
    .progress-bar {
      justify-content: center;
    }
    .course-content-right-cta {
      margin-bottom: 60px;
    }
  }
</style>