{% assign instructor = course.instructors | first %}
<div class="width-limit instructor-card">
  <h3 class="instructor-card-title">
    <span class="lang-en">Your host for the course</span>
    <span class="lang-de">Ihr Kursleiter</span>
    <span class="lang-es">Su anfitrión para el curso</span>
    <span class="lang-fr">Votre formateur/formatrice</span>
    <span class="lang-br">Apresentador do curso</span>
  </h3>
  <div class="instructor-card-body">
    <div class="instructor-image-container">
      <img class="instructor-image" src="{{ instructor.avatar_url }}" alt="{{ instructor.name }}">
    </div>
    <div class="instructor-text-container">
      <h4 class="instructor-bio">
        <svg class="opinion-quotes" width="26" height="23" viewBox="0 0 26 23" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M24 10C23.6818 11.3796 23.346 12.8476 22.9924 14.4041C22.6742 15.9605 22.3737 17.4816 22.0909 18.9673C21.8081 20.4177 21.5783 21.7619 21.4015 23L14.1364 23L13.7652 22.4163C14.0833 21.1429 14.4899 19.7986 14.9848 18.3837C15.4798 16.9687 16.0101 15.5361 16.5758 14.0857C17.1768 12.6354 17.7601 11.2735 18.3258 10L24 10ZM12.2348 10C11.9167 11.3796 11.5808 12.8476 11.2273 14.4041C10.9091 15.9605 10.6086 17.4816 10.3258 18.9673C10.0429 20.4177 9.81313 21.7619 9.63636 23L2.37121 23L2 22.4163C2.31818 21.1429 2.72475 19.7986 3.2197 18.3837C3.71465 16.9687 4.24495 15.5361 4.81061 14.0857C5.41162 12.6354 5.99495 11.2735 6.56061 10L12.2348 10Z" fill="var(--green)"/>
        </svg>
        {{ instructor.bio | strip_html }}
      </h4>
      <div class="instructor-name body-s strong">
        {{ instructor.name }},
      </div>
      <div class="instructor-title body-s">
        {{ instructor.title }}
      </div>
    </div>
  </div>
</div>

<style>
  .instructor-card {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .instructor-card-title {
    margin-bottom: 20px;
  }
  .instructor-image-container {
    margin-bottom: 20px;
    width: 100%;
  }
  .instructor-image {
    border-radius: 4px;
    width: 100%;
    margin: auto;
  }
  .instructor-bio {
    font-weight: 400;
    margin-bottom: 20px;
  }
  .opinion-quotes {
    top: -7px;
    position: relative;
  }
  
  @media only screen and (min-width: 768px) {
    .instructor-card {
      margin-top: 80px;
      margin-bottom: 80px;
    }
    .instructor-card-title {
      margin-bottom: 40px;
    }
    .instructor-card-body {
      display: flex;
    }
    .instructor-image-container {
      margin-bottom: unset;
      flex-basis: 22%;
      min-width: 300px;
      margin-right: 50px;
      display: flex;
    }
    .instructor-text-container {
      flex-basis: 48%;
    }
  }
</style>
