improving website layout

Author: rafaelfsilva

_includes/talk_card.html

@@ -1,22 +1,22 @@
 {% assign talk = include.talk %}
 <div class="swiper-slide">
   <div class="testimonial-wrap">
-    <div class="testimonial-item">
-      <div class="d-flex justify-content-between align-items-center info-box" style="width: 100%;">
-        <div style="flex: 1;">
-          <span style="font-size: 0.8em;">{{ talk.event_date | date: "%b %d, %Y" }}</span>
-          <h3 class="heading"><a href="{{ talk.url }}">{{ talk.title }}</a></h3>
-          <span class="position">{{ talk.authors }}</span>
+    <div class="testimonial-item talk-card-item">
+      <a class="talk-card-link" href="{{ talk.url }}" aria-label="{{ talk.title }}"></a>
+      <div class="d-flex justify-content-between align-items-center info-box talk-card-layout">
+        <div class="talk-card-info">
+          <span class="talk-card-date">{{ talk.event_date | date: "%b %d, %Y" }}</span>
+          <h3 class="heading">{{ talk.title }}</h3>
+          <span class="position talk-card-speakers">{{ talk.authors }}</span>
           {% if talk.report_link %}
-          <img src="{{ talk.report_badge }}" alt="DOI" style="padding-top: 0.5em" />
+          <img src="{{ talk.report_badge }}" alt="DOI" class="talk-card-badge" />
           {% endif %}
         </div>
-        <div style="text-align: right;">
+        <div class="talk-card-avatars">
           {% assign speakers = site.data.speakers | where: "talk_num", talk.talk_number %}
           {% for member in speakers %}
           {% assign photo_src = member.photo | default: 'headshot_placeholder.jpg' %}
-          <img src="/images/talks/{{ photo_src }}" alt="{{ member.name }}"
-               style="width: 60px; height: 60px; object-fit: cover; border-radius: 50%; margin-left: 0.5em;" />
+          <img src="/images/talks/{{ photo_src }}" alt="{{ member.name }}" class="talk-card-avatar" />
           {% endfor %}
         </div>
       </div>