<h3 class="np-card-heading">
  Meet the Instructor
</h3>
<div class='np-flex'>
  {% for instructor in course.instructors limit: 2 %}
    <div class="np-content-instructors-content-item">
      <div class="instructor-image">
        <img
          src="{{ instructor.avatar_url }}"
          class="np-content-instructors-content-image"
          alt="{{ instructor.name }}"
          style='border-radius: 50%;'
        />
      </div>
      <div class="np-content-instructors-content-description" style='margin: auto 1rem;'>
        <div class="np-content-instructors-content-name">
          {{ instructor.name }}
        </div>
        <div class="np-content-instructors-content-info">
          {{ instructor.title }}
        </div>
      </div>
    </div>
  {% endfor %}
</div>
<style>
  .instructor-image {
    background: #001E2E;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100px;
  }
  .instructor-image img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
  }
  @media only screen and (min-width: 768px) and ( max-width: 920px) {
    .np-flex {
      flex-direction: column;
    }
  }
  @media only screen and ( max-width: 630px) {
    .np-flex {
      flex-direction: column;
    }
  }
</style>