Media objects

<div class="comment">
  <div class="comment_avatar">
    <img class="placeholder" alt="">
  </div>
  <div class="comment_text">
    <div class="comment_name">
      <strong>Sam</strong> <a class="text-meta">1 day ago</a>
    </div>
    <div class="comment_content">
      <p>
        This is a comment.
      </p>
    </div>
  </div>
</div>

<div class="event">
  <div class="event_avatar">
    <img class="placeholder" alt="">
  </div>
  <div class="event_text">
    <div class="event_content">
      <strong>Emma</strong>  wants to be your friend <a class="text-meta">1 hour ago</a>
    </div>
  </div>
</div>

Template

@mixin mediaObjectVariables
/*  1. media image width .... */  var(--media-object-image-width),
/*  2. media image height ... */  var(--media-object-image-height),
/*  3. media gap ............ */  var(--media-object-gap),
/*  4. media radius ......... */  var(--media-object-image-radius),
/*  5. vertical spacing ..... */  var(--media-v-gap);

@mixin mediaObjectSelectors
/*  1. media object.......... */  .comment,
/*  2. media image .......... */  .comment_avatar,
/*  3. media text ........... */  .comment_text,
/*  4. first line ........... */  .comment_name,
/*  5. additional lines ..... */  .comment_content;