{% from "components/media-object/_macro.media-object.njk" import componentMediaObject %}
{% call componentMediaObject({
  "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>"
}) %}
<p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>
{% endcall  %}

<!-- media-object -->
<div class="flex">
  <div>
    <div class=' w-20 h-20 '>
      <div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div>
    </div>
  </div>
  <div class="flex-1">
    <p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>
  </div>
</div>
<!-- /media-object -->
            

{% from "components/media-object/_macro.media-object.njk" import componentMediaObject %}
{% call componentMediaObject({
  "reverse": true,
  "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>"
}) %}
<p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>
{% endcall  %}

<!-- media-object -->
<div class="flex">
  <div class="order-1">
    <div class=' w-20 h-20 '>
      <div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div>
    </div>
  </div>
  <div class="flex-1">
    <p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>
  </div>
</div>
<!-- /media-object -->
            

{% from "components/media-object/_macro.media-object.njk" import componentMediaObject %}
{% call componentMediaObject({
  "center": true,
  "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>"
}) %}
<p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>
{% endcall  %}

<!-- media-object -->
<div class="flex items-center">
  <div>
    <div class=' w-20 h-20 '>
      <div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div>
    </div>
  </div>
  <div class="flex-1">
    <p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>
  </div>
</div>
<!-- /media-object -->
            

{% from "components/media-object/_macro.media-object.njk" import componentMediaObject %}
{% call componentMediaObject({
  "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
  "figureClasses": "mr-base",
  "contentClasses": "text-sm",
  "classes": "mb-base"
}) %}
<p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>
{% endcall  %}

<!-- media-object -->
<div class="flex mb-base">
  <div class="undefined mr-base">
    <div class=' w-20 h-20 '>
      <div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div>
    </div>
  </div>
  <div class="flex-1 text-sm">
    <p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>
  </div>
</div>
<!-- /media-object -->
            

{% from "components/media-object/_macro.media-object.njk" import componentMediaObject %}
{% call componentMediaObject({
  "reverse": true,
  "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
  "figureClasses": "ml-base",
  "contentClasses": "text-sm",
  "classes": "mb-base"
}) %}
<p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>
{% endcall  %}

<!-- media-object -->
<div class="flex mb-base">
  <div class="order-1 ml-base">
    <div class=' w-20 h-20 '>
      <div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div>
    </div>
  </div>
  <div class="flex-1 text-sm">
    <p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>
  </div>
</div>
<!-- /media-object -->