<body>
  <div class="container px-4 mx-auto my-10"> 
<div class="md:grid md:grid-cols-2 md:gap-8 relative mt-10 lg:mt-16 items-center">
  <div class="relative lg:ml-8 my-8 w-full md:w-auto">
    <h3 class="text-base not-italic leading-6 text-gray-600">FEATURED POST</h3>
    <a href={{featured.permalink}} class="">
        <h2 class="mt-8 text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-2 md:mb-4">
            {{ featured.title }}
        </h2>
    </a>
    <p class="mb-4 md:mb-10 text-lg lg:pr-4">
        {{featured.description}}
    </p>
    
    <h4 class="text-sm not-italic font-light leading-6 text-gray-600"> 
        {{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} - 
        {{ featured.extra.author }}
    </h4>
        
  </div>

  <div class="mx-4 relative lg:mt-0 max-w-full">
    {% set img_url = get_url(path='/' ~ featured.relative_path | replace(from='_', to='-') | replace(from='index.md',
    to=featured.extra.imgPath)) %}
    <img class="relative mx-auto md:w-auto md:max-w-full max-h-80" src="{{img_url}}" alt="" />
  </div>
</div>
<hr class="mt-6">
</div>
</div>
</div> 
</body> 