{% assign bg_color = "#FAFAFA" %}
{% assign txt_color = "#2E29FC" %}
{% assign content_type = course.properties.content_type | downcase | replace: " ", "-" %}

{% if content_type == "blue-mattr" %}
  {% assign bg_color = "#E2E5FF" %}
  {% assign txt_color = "#2E29FC" %}
{% endif %}

{% if content_type == "dark-mattr" %}
  {% assign bg_color = "#333132" %}
  {% assign txt_color = "#EAD9E3" %}
{% endif %}

{% if content_type == "grey-mattr" %}
  {% assign bg_color = "#C0BDBF" %}
  {% assign txt_color = "#333132" %}
{% endif %}

<div class="course-header" style="background-color:{{bg_color}}">
  <img class="course-header-image np-hidden-mobile" src="{{ course.image_url }}" alt="{{ course.name }}" />
  <div class="np-max-width course-header-container">
    <div class="course-title" style="color:{{txt_color}}">
      {{ course.name }} ({{course.properties.experience}})
    </div>
  </div>
</div>

<style>
  .course-header {
    position: relative;
    width: 100%;
    margin-top:70px;
  }

  .course-header-image {
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    height:100%;
    width:auto;
  }

  .course-header-container {
    padding: 32px 24px;
  }

  .course-title {
    font-size: 32px;
    font-weight: 600;
    max-width: 520px;
    line-height: 38px;
    position: relative;
  }

  @media (min-width:768px) {
    .course-header {
      height: 300px;
    }

    .course-header-container {
      padding: 48px 24px 32px;
    }

    .course-title {
      font-size: 40px;
      line-height: 48px;
    }
  }

  @media (min-width:1200px) {
    .course-header-container {
      padding: 48px 5% 32px;
    }

    .course-title {
      font-size: 48px;
      line-height: 52px;
    }
  }
</style>