Displaying workshops on a page

Question

A section of my page lists 'Workshops' and just uses objects from a queryset. The page/site uses bootstrap.

<div class="row my-4">
    <div class="container">
        {% if workshops|length %}
          <div class="row">
            <h3 class="text-uppercase font-weight-bolder font-title ml-4">Learn through workshops</h3>
          </div>
          <div class="row">
            {% for workshop in workshops %}
                <style>
                  #workshop-cover {
                    max-width: {{ workshop.cover_max_width }}px;
                  }
                </style>
                <div class="col-xs-12 col-sm-5 col-lg-4">
                  <div class="mb-5 mt-5">
                    <div class="container" style="position:relative">
                      <div class="row">
                        <div>
                          <a href="{{ workshop.url }}" target="_blank" style="text-decoration:none;">
                            <img id="workshop-cover" src="{{ MEDIA_URL }}{{ workshop.cover }}" alt="Workshop cover" />
                          </a>
                        </div>
                        <div style="position:absolute;left:13.9rem;top:8rem;">
                          <a href="/{{ workshop.speaker.handle }}">
                            <img class="speaker-avatar float-right" src="{{ workshop.speaker.avatar_url }}" alt="{{ workshop.speaker.handle }}'s Avatar or Logo" />
                          </a>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-8">
                        <a href="{{ workshop.url }}" target="_blank" style="text-decoration:none;">
                          <span class="font-weight-bold d-flex font-title mt-1 mb-1" style="color:black;">{{ workshop.name }}</span>
                        </a>
                      </div>
                    </div>
                    <div>
                      <div class="small">in {{ workshop.start_date|timeuntil }}</div>
                    </div>
                  </div>
                </div>
            {% endfor %}
          </div>
        {% endif %}
    </div>
  </div>

In particular, I am wondering two things:

In order to show the 'speaker avatar' in the position I wanted, I just used a position: relative container in which I put the 'cover' and the avtar and set the div for the avatar as absolute. I want to know if there is a better to way to accomplish what I want.

Second, I needed the workshop title to wrap so it does not get hidden by the 'speaker avatar', but after some 'playing around' I just put it in a col-8 (boostrap) div. I am wondering about a better to handle wraping the title? What rearranging would I need to do if any to accomplish that?

Lastly, any advice on how to make this cleaner both structurally or syntactically would be welcome.