<body>

  <div class="md:grid md:grid-cols-2 md:gap-8 relative mt-12 md:mt-10 items-center container mx-auto">
    <div class="relative my-8 w-full md:w-auto mx-3 lg:mx-12">
      <h3 class="text-base not-italic font-medium leading-6 text-gray-100 mb-4">FEATURED NEWS</h3>
      <a href={{featured.permalink}}>
        <h2
        class="text-2xl main-title md:text-4xl fw-500 text-gray-50 font-medium">
          {{ featured.title }}
        </h2>
        <p class="mt-2 text-base font-normal text-gray-50 text-left">
          {{ featured.description }}
        </p>
      </a>

      <h4 class="my-2 text-sm not-italic font-light leading-6 text-gray-100">
        {{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} -
        {% for author in featured.taxonomies.people %}
        {% set author_path = 'people/' ~ author ~ '/index.md' %}
        {% set author = get_page(path=author_path) %}
        {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
        <a href="{{author.permalink}}" tooltip="{{author.title}}" class="capitalize	text-gray-200"> <img
            src="{{ author_img }}" alt="{{ author.title }}" class="
            inline-flex 
          w-8
          h-8
          rounded-full
          bg-gray-200
          border-2 border-white
        " /> {{ author.title }}</a>
        {% endfor %}
      </h4>

    </div>

    <div class="relative lg:mt-0 max-w-full">
        {% if featured.extra.imgPath %}
      <img class="relative rounded mx-auto  max-h-64 p-2 border-2 border-gray-100" src={{featured.permalink}}{{featured.extra.imgPath}} alt="" />
        {% endif %}
    </div>
  </div>
  <hr class="mt-6 container border-gray-600 mx-auto">
  </div>
  </div>
</body>